inherit

inherit关键字使得元素获取其父元素的计算值。它可以应用于任何CSS属性，包括CSS简写all。

对于继承属性，inherit关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。

继承始终来自文档树中的父元素，即使父元素不是包含块。

示例

/* 设置二级标题的颜色为绿色 */
h2 { color: green; }

/* ...but leave those in the sidebar alone so they use their parent's color */
#sidebar h2 { color: inherit; }

在下面这个例子中，如果sidebar 中h2元素的div匹配下面的规则的话，颜色会变成蓝色。

div#current { color: blue; }
兼容性

全支持

initial

initialCSS关键字将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何CSS属性。这包括CSS简写all，initial可用于将所有CSS属性恢复到其初始状态。

示例

<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
p {
  color: red;
}

em {
  color: initial;
}
兼容性

IE不支持

revert

示例

h3 {
  font-weight: normal;
  color: blue;
}

<h3 style="font-weight: unset; color: unset;">This will still have font-weight: normal, but color: black</h3>
<p>Just some text</p>
<h3 style="font-weight: revert; color: revert;">This should have its original font-weight (bold) and color: black</h3>
<p>Just some text</p>

兼容性

IE不支持

unset

CSS关键字unset可以分为两种情况，如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说，在第一种情况下（继承属性）它的行为类似于inherit，在第二种情况下（非继承属性）类似于initial。它可以应用于任何CSS属性，包括CSS简写属性all。

示例

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
.foo {
  color: blue;
}
.bar {
  color: green;
}

p {
  color: red;
}
.bar p {
  color: unset;
}

兼容性

IE不支持

参考

写了这么多年 CSS，initial 和 inherit 以及 unset 和 revert 还傻傻分不清楚？
MDN Web Docs inherit
MDN Web Docs initial
MDN Web Docs revert
MDN Web Docs unset