Css 评分和排名规则

我的样式表中有两条相互竞争的规则：

#parent>div{
颜色：蓝色；
}
#孩子{
颜色：红色；
}

以下是相关的HTML：

这是什么颜色的文字？
这应该是蓝色的
也应该是蓝色的

为什么

#child

是蓝色而不是红色？

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

• 规则#1有一个id和一个标签，所以它的分数是

  [0,1,0,1]

• 规则2只有一个id，所以它的分数是

  [0,1,0,0]

• 因此规则1获胜，它是蓝色的

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

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

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

选择器匹配是按元素进行的，而不是按规则进行的。由于有一个更具体的选择器与元素

#child

匹配，即

#parent>div

，因此该规则优先，仅此而已

这看起来确实违反直觉，但这就是它的工作原理。解决这个问题的一种方法是将

#parent

添加到第二条规则中：

#parent>div{
颜色：蓝色；
}
#父母>#子女{
颜色：红色；
}

你也可以这样想：规则1只适用于

div

元素，前提是它们是ID为

#parent

的任何元素的子元素，而规则2只适用于ID为

#child

的任何元素，无论它在HTML中的哪个位置。注意这使得规则#2变得不那么具体了吗？请记住，CSS本身并不知道它所应用的实际HTML，因此我关于匹配的元素数量如何不影响特定性的评论。我明白你的观点，但id应该是唯一的，因此任何id为的元素都不应该匹配多个元素。这就是为什么我认为这是非直觉的。事实上。然而，关于ID唯一性的规则仅对HTML是规范性的，而事实证明，CSS并不强制执行该规则。有关详细信息，请参阅。