CSS 关键字“Initial”、“Inherit”和“Unset”深度解析

CSS 中有各种各样的。本文我将着重介绍以下几个initial、inherit 以及较新的 unset。我确信绝大多数开发者都见过这几个关键字，但是对于它们的原理确知之甚少。

在此之前的一段时间，我只知道这些关键字是用来重置 CSS 样式的，但是如果它们都起到了重置的作用，它们之间有什么区别呢？

于是，我决定深入研究一下这些关键字，以便更好地理解它们是如何工作的，以及在什么情况下使用它们。

经过一番研究，我发现这些关键字的作用远比我想象的要复杂得多。它们不仅可以用来重置 CSS 样式，还可以用来继承父元素的样式，以及清除元素的样式。

Initial

initial 关键字的作用是将元素的属性值重置为其初始值。初始值是浏览器为该属性指定的默认值。例如，元素的 color 属性的初始值是黑色。

/* 将元素的 color 属性值重置为黑色 */
element {
  color: initial;
}

Inherit

inherit 关键字的作用是让元素继承父元素的属性值。例如，元素的 font-size 属性的初始值是 16px。如果元素的父元素的 font-size 属性值为 20px，那么该元素的 font-size 属性值也会变成 20px。

/* 让元素继承父元素的 font-size 属性值 */
element {
  font-size: inherit;
}

Unset

unset 关键字的作用是清除元素的属性值。也就是说，如果元素的某个属性值被显式地设置为 unset，那么该属性值将被清除，元素将使用该属性的初始值。例如，元素的 color 属性值被显式地设置为 unset，那么该元素的 color 属性值将被清除，元素将使用 color 属性的初始值黑色。

/* 清除元素的 color 属性值 */
element {
  color: unset;
}

比较

下表比较了 initial、inherit 和 unset 关键字的作用：

关键字	作用
initial	将元素的属性值重置为其初始值
inherit	让元素继承父元素的属性值
unset	清除元素的属性值

总结

initial、inherit 和 unset 关键字是 CSS 中非常有用的关键字。它们可以用来重置 CSS 样式，继承父元素的样式，以及清除元素的样式。通过理解这些关键字是如何工作的，以及在什么情况下使用它们，我们可以更好地控制 CSS 样式。