CSS属性的继承、初始和未设置值

来自菜鸟教程
跳转至:导航、​搜索

所有 CSS 属性都有 3 个共同的基本值:inheritinitialunset。 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;
}