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

Question

我有这个CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果如下：

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

Answer 1

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

以下是您的示例中的规则如何工作：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;