评分和排名特异性规则

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

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

一点也不。仅仅因为选择器匹配较少的元素并不能使其更加具体。

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

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

#parent > div {
    color: blue;
}

#parent > #child {
    color: red;
}