所有 CSS 属性都有 3 个共同的基本值:inherit、initial 和 unset。 Inherit 和 initial 已经存在了很长时间,但 unset 是一个新的添加。 这些值的作用有时会让人感到困惑,所以这里有一个细分:
- inherit:从父元素获取属性。
- initial:属性的默认值(浏览器默认)。
- unset:作为继承或初始。 如果父级具有匹配的值,它将充当继承,否则它将充当初始值。
这是一个清楚的例子。 这是我们的标记:
<div class="wrapper"> <p class="one">Snake<p> <p class="two">Lizard<p> <p class="three">Alligator</p> <p>Komodo Dragon</p> </div>
这是我们的 CSS:
.wrapper { color: orange; } .wrapper p { color: purple; } p.one { color: inherit; } p.two { color: initial; } p.three { color: unset; }
- Snake 是橙色的,它继承自包装器 div。
- Lizard 为黑色,取初始浏览器默认值。
- Alligator 是橙色的,在这种情况下 unset 充当 inherit 因为存在具有匹配值的父项。
- Komodo Dragon 是紫色的,是唯一从 .wrapper p 选择器中获取值的段落。
👉 unset 的一个巧妙技巧是与 all 简写结合使用,它会自动影响选择器的所有属性。 以下将取消设置所选 p 元素的所有属性:
article p { all: unset; }