CSS 中的 inherit initial unset revert 继承关键字

分别应用：

.inherit { color: inherit; }   /* 继承蓝色 */
.initial { color: initial; }   /* 浏览器初始颜色（通常黑色） */
.unset   { color: unset; }     /* color 可继承，等同 inherit，结果为蓝色 */
.revert  { color: revert; }    /* 回归浏览器默认段落颜色（通常黑色） */

注意 color 是继承属性，因此 unset 显示继承效果；revert 则会忽略当前容器上的显式设置，回到用户代理对 <p> 预设的颜色（通常与 initial 结果相同，都可能是黑色，但理论来源不同）。

再看一个不可继承属性 border：

p {
  border: 1px solid red;
}
p.initial-border { border: initial; }  /* 无边框（初始值 none） */
p.revert-border  { border: revert; }   /* 无边框（浏览器默认段落无边框） */

此处 initial 和 revert 结果可能相同，但含义差异在 display 这类属性上会尤为明显。

all 属性：一次性重置所有属性

这四种关键字常与 all: inherit | initial | unset | revert; 结合使用，将元素上所有属性统一重置。例如：

.custom-component {
  all: initial; /* 把所有属性重置到规范初始值，再逐步添加需要的样式 */
}