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

所有 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;
}