元素还可以通过 继承 获得样式。

并不是全部的属性（property）都会被继承，比如你在外层 <div> 设置的 border 就不会被内层 <div> 继承。你直觉上认为这个属性会被继承，那么它大概念是会被继承的，如：

• 文本相关的属性，如 color, font, font-family, line-height 等
• 列表属性，如 list-style 等
• 表格的 border 属性，如 border-collapse 等

浏览器的 Dev Tool 可以观察到继承的现象。

同时 CSS 又提供了几种机制来控制继承。它们由 inherit, initial, unset 及 revert 关键字来控制。

inherit

你的页面有一个 Footer，里面有个 Terms of use 链接。你希望这个链接的颜色更低调一点，区分于主页面中的链接。那你可以这样做：

如果不加 color: inherit 这行，footer 中的链接颜色会由 directly targeted 的 a:link 来定义而变成 blue。

initial

initial 关键字可以将属性的值变回 user-agent stylesheet 中的默认值，一般即浏览器的默认值。

比如你给 .footer a 置一个 color: initial，那么它的颜色会变成浏览器默认的黑色。

注意 display 的默认值是 inline，因此即使你给一个 block element 置 display: initial，它会变为 inline 而不是 block。我感觉 initial 没什么用。

unset

参考 MDN：

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

即是说，直接应用到元素本身的（即非继承下来的）属性会失效。视有无继承下来的属性而有不同的行为。

revert

很少见到使用，不去做研究。需要时看 MDN。

Resources

• CSS Inheritance