css - 关于令人困惑的 CSS 特异性规则的问题，（来自 SAMS 在 24 小时内自学 CSS 第二版一书。）

Question

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

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

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

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

score 5 · Accepted Answer

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

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

所以在这两个规则之间（假设没有内联样式）：

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

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

score 2 · Accepted Answer

这是一个示例，具有更多 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 将具有红色背景。

2 回答 2