CSS中inherit的含义是什么？替换样式后显示效果是否一致？

1. CSS中inherit的含义 #

inherit是CSS的关键字，作用是让元素的指定属性直接继承父元素的对应属性值。哪怕元素自身已经给该属性设置了值，只要用了inherit，就会覆盖自身设置，强制使用父元素的属性值。

2. 样式修改后的效果对比 #

原代码示例 #

CSS代码：

.pink {
  background-color: pink;
}

.green {
  background-color: lightgreen;
}

.override {
  background-color: inherit;
}

HTML代码：

<div class="pink">
  <p class="green">I'm classed "green", and I am green.</p>
  <p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>

原代码里，第二个<p>标签同时拥有.green和.override类，.override的inherit会覆盖.green的lightgreen，让它继承父元素.pink的粉色背景。

修改后的.override样式 #

.override{
  background-color: pink;
}

修改后，第二个<p>标签的背景色依然是粉色，和原效果完全一致。因为.green和.override都是类选择器，权重相同，后定义的.override样式会覆盖.green的设置，直接设置pink和继承来的pink最终视觉效果没有区别。

内容的提问来源于stack exchange，提问作者Arman Eousuf