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

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

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

选择器匹配是在逐元素的基础上完成的，而不是在逐规则的基础上。由于有一个更具体的选择器与您的元素匹配#child，#parent > div也就是说，该规则优先，仅此而已。

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

#parent > div {
    color: blue;
}

#parent > #child {
    color: red;
}