关于令人困惑的 CSS 特异性规则的问题（摘自《SAMS Teach Yourself CSS in 24 Hours Second Ed》一书）

Question

这是本书给出的关于浏览器如何确定在冲突中应用哪条规则的 5 条规则中的第 2 条：

id 选择器是第二个最具体的[在内联样式属性之后]。如果规则中存在多个 id，则 id 选择器数量最多的规则获胜。

我真的不明白规则 2 在说什么——它说“如果规则中存在多个 id”（这是单数）。如果只有一条规则，如何存在冲突或比较（“最大……的规则获胜”）？一条规则怎么会有不同数量的 id 选择器，如果只有一条规则，冲突在哪里？

有人可以彻底解释一下这条规则吗？感谢您的帮助，因为我正在努力了解网页设计的基础知识

Answer 1

一个选择器可以有任意数量的 ID 选择器。

例如，如果 ID 为 id2 的元素是 ID 为 id1 的元素的后代，#id1 #id2 会选择该元素。它有两个 ID 选择器，因此它比 #id2 更具体，后者只选择任何具有 ID id2 的元素，没有任何其他条件。

因此，在这两个规则之间（假设没有内联样式）：

#id1 #id2 { color: red; }
#id2 { color: blue; }

第一个规则优先，并且该元素中的文本颜色为红色而不是蓝色，因为第一个规则具有更多 ID 选择器。

Answer 2

这是一个示例，具有更多 id 的选择器将优先：

<div id="parent">
   <div id="child">
      Some text here
   </div>
</div>

现在，当我应用 css 时，

#parent #child {
   background-color: red;
}

#parent div {
    background-color: yellow;
}

选择器 #parent #child 将优先。因为它比第二个更具体。在这种情况下，div 将具有红色背景。