css - 评分和排名特异性规则

Question

我的样式表中有两个相互竞争的规则:

#parent > div {
    color: blue;
}

#child {
    color: red;
}

这是相关的 HTML:

<div id="parent">
 <div id="child">What color is this text?</div>
 <div>This should just be blue</div>
 <div>Also should be blue</div>
</div>

为什么 #child 是蓝色而不是红色？

我不确定我是否正确应用了评分系统。这是我的做法:

• 规则 #1 有一个 id 和一个标签，所以它的分数是 [0, 1, 0, 1]
• 规则 #2 只有一个 id，所以它的分数是 [0, 1, 0, 0]
• 因此规则 #1 获胜，它是蓝色的

但这对我来说似乎是错误的——第一个规则匹配多个元素；第二条规则只能匹配一个!那么第二条规则不是更具体吗？

Answer 1

But this seems wrong to me -- the first rule matches multiple elements; the second rule can only match one! So isn't the second rule more specific?

完全没有。仅仅因为选择器匹配较少的元素并不会使它更具体。

选择器匹配是按元素进行的，而不是按规则进行的。由于有一个更具体的选择器匹配您的元素 #child，即 #parent > div，因此该规则优先，仅此而已。

这看起来确实违反直觉，但这就是它的工作原理。解决此问题的一种方法是将 #parent 添加到您的第二条规则中:

#parent > div {
    color: blue;
}

#parent > #child {
    color: red;
}