CSS inherit关键字排除选中元素规则的MDN示例疑问

规则优先级基础 #

CSS选择器匹配元素时，会按权重优先级决定最终生效的样式，本示例涉及的三条规则优先级从低到高为：全局h2类型选择器 < div#current ID选择器 < #sidebar h2 组合选择器。

逐行规则解析 #

• 全局h2规则：h2 { color: green; }
  用类型选择器匹配页面所有二级标题，默认将所有h2文字颜色设为绿色，权重为0001。
• 侧边栏h2规则：#sidebar h2 { color: inherit; }
  用ID+类型的组合选择器，仅匹配id为sidebar的容器内部的h2元素，权重为0101，优先级高于全局h2规则，会覆盖掉全局的绿色设置。其中inherit关键字的作用是：强制让当前h2的color属性值等于直接父元素的color属性值。
• 父容器规则：div#current { color: blue; }
  用ID选择器匹配id为current的div元素，将该div的文字颜色设为蓝色，权重为0100。

最终样式生效逻辑 #

如果DOM结构为以下嵌套关系：

<div id="sidebar">
  <div id="current">
    <h2>测试二级标题</h2>
  </div>
</div>

1. 该h2同时匹配全局h2规则和#sidebar h2规则，优先级更高的后者生效，color属性值为inherit
2. h2的直接父元素是div#current，该div的color属性被设置为蓝色
3. h2继承父元素的蓝色，最终显示为蓝色

如果侧边栏内的h2没有被设置了color的父元素包裹，直接作为#sidebar的子元素，则会继承#sidebar的color值，如果#sidebar也没有自定义color，就会继续向上继承上层元素的color，最终默认继承body的黑色。

内容的提问来源于stack exchange，提问作者Juniad Ali