CSS 关键字 unset 在应用于属性时,如果该属性自然地从其父级继承,则将其设置为继承值;否则为初始值,以防没有继承。
关键字 unset 可以应用于任何 CSS 属性,包括 CSS 简写属性 all.
CSS unset - 基本示例
在以下示例中,CSS 关键字 unset 应用于元素 h1、p 和 ul 的 margin-top、font-size 和 color 属性。
此关键字将这些属性重置为其继承值,从而允许这些元素继承或者回退到浏览器或父元素定义的默认样式。
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color:red;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #555;
color: white;
padding: 10px;
text-align: center;
}
.content {
margin: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
}
.sidebar {
width: 150px;
background-color: #eee;
padding: 10px;
float: left;
}
.main-content {
margin-left: 220px;
}
.footer {
clear: both;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
h1, p, ul {
margin-top: unset;
font-size: unset;
color: unset;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
}
li {
margin: 10px;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>首页</li>
<li>关于</li>
<li>联系</li>
</ul>
</nav>
<div class="content">
<div class="sidebar">
<h2>Sidebar</h2>
<p>这是侧边栏内容。</p>
</div>
<div class="main-content">
<h2>主要内容</h2>
<p>这是包含各种元素的主要内容区域。</p>
</div>
</div>
<div class="footer">
<p>页脚</p>
</div>
</body>
</html>