为什么颜色和字体大小属性在特异性上得到不同的处理？

Question

我有这个 CSS:

h2 {
  color: #000;
  font-size: .9em;
}
#exp {
  color: red;
  font-size: .8em;
}

<div id="exp">
  hello
  <h1>hello</h1>
  <h2>hello</h2>
  <h3>hello</h3>
</div>

结果是这样的：

我了解字体大小的变化。 #exp比h2更具体，但为什么颜色没有变化？

Answer 1

当一个元素被两条规则匹配时，特异性才算数；在这种情况下，具有更高特异性的规则获胜。但是，在您的示例中并非如此；规则 #exp { } 不匹配 h2 个元素。

示例中的规则是这样工作的：

/* rule #1 */
h2 {
  color: #000;
  font-size: .9em;
}
/* rule #2 */
#exp {
  color: red;
  font-size: .8em;
}

<div id="exp">
  hello           <!-- red color (via rule #2) -->
  <h1>hello</h1>  <!-- red color (inherited from parent) -->
  <h2>hello</h2>  <!-- black color (via rule #1) -->
  <h3>hello</h3>  <!-- red color (inherited from parent) -->
</div>

为什么颜色和字体大小属性在特异性上得到不同的处理？

Why color and font-size properties got different treatments on specificity?

css

css-specificity