逗号分隔列表的特殊性规则

Posted 2023-03-06

【中文标题】逗号分隔列表的特殊性规则

【英文标题】：Specificity rules for comma delineated lists

【发布时间】：2016-10-11 03:42:34

【问题描述】：

在使用级联样式表时，我观察到的具体顺序如下：

第一定律：内联样式第二定律：ID选择器的数量第三定律：类的数量选择器第四定律：元素选择器的数量

因此，具有内联样式的项目首先出现，然后是具有一个或多个 ID 选择器的声明，然后是具有一个或多个类选择器的声明，然后是具有一个或多个元素选择器的声明。更多的 ID、类和元素分别意味着更高的优先级。

从这个角度来看，我无法理解以逗号分隔的 ID、类或元素列表适合的位置。逗号分隔的列表是否有任何特殊的优先规则？此外，在单个逗号分隔的列表中，ID、类和元素是否被视为单独的项目，以便计算特异性？

代码示例：

html, body, header 
  position: absolute;
  top: 0px;

header 
  position: relative;
  top: 50px;

在上面的例子中什么优先？逗号分隔的列表是否被视为引用单个元素，在这种情况下，标头将优先于级联中的最后一个，或者逗号分隔的列表被视为多个元素，因此优先？还是我应该首先考虑其他规则？

【问题讨论】：

它们都是完全相同的选择器。在第二个示例中，您只是将三个单独的选择器组合成一个。第二个优先，因为它是最后一个，因此会优先于第一个。

'html, body, header,would imply that the rules declared would apply to all those selectors specified, and makes no difference in specificity to simply declaring a rule with just the header` 选择器 - 当然除非规则在级联顺序中较低。因此，在您上面提供的示例中，header 的第二条规则将超过为header 声明的第一条规则。

我注意到上面的问题有一个错误。我应该将html, body, header 放在顶部而不是底部，并更改“逗号分隔的列表是否被视为引用单个元素，在这种情况下，标题将优先于级联中的第一个，或者是逗号划定列表被视为多个元素，因此优先？”结果以不同的方式阅读。我现在应该更改它以纠正我的错误吗？

@Buddha Theis：你应该。如果不出意外，这对接受的答案没有影响。

我注意到您在那里切换接受的答案。请注意，一个问题一次只能有一个被接受的答案，即您对该问题的回答令您满意。一旦你有更多的代表，你就可以投票给对你有帮助的尽可能多的答案。

【参考方案1】：

逗号分隔的列表是否有任何特殊的优先规则？

严格来说，选择器列表没有自己的特异性值，但出于级联的目的，选择器列表的特异性等于匹配元素的最具体选择器的特异性。这在the current specification 中没有明确说明，但它出现在selectors-4 中。即便如此，由于选择器列表只不过是一种将两个或多个选择器组合在一个表达式中而无需重复其样式声明的方式，因此它会以这种方式工作是有道理的。

请记住，选择器只有在匹配元素时才与元素相关 - 否则，它永远不会进入特异性计算或级联的任何部分。

此外，在单个逗号分隔的列表中，ID、类和元素是否被视为单独的项目，以便计算特异性？

每个简单的选择器都有自己的特殊性值，但这些值是在复杂选择器级别相加的。复杂选择器是选择器列表的一部分。例如，选择器列表

.foo > .bar, nav input:checked + label

有两个复杂的选择器：

.foo > .bar，特异性为 (0, 2, 0) nav input:checked + label，特异性为 (0, 1, 3)

在上面的例子中什么优先？逗号分隔的列表是否被视为引用单个元素，在这种情况下，标头将优先于级联中的最后一个，或者逗号分隔的列表被视为多个元素，因此优先？

在您的示例中，选择器列表 html, body, header 由三个单独的单独类型选择器组成。由于每个元素一次只能是一种元素类型，因此很容易推断出列表中的所有三个选择器都是互斥的，即一个元素一次只能匹配三个选择器中的任何一个（或根本不匹配） )。 header 元素永远不能匹配 html 或 body 选择器，因此这些选择器都不相关。您只需处理 header 选择器，在您的示例中，特异性就不再是一个问题。结果是您的 second 规则（仅包含 header 选择器）优先，因为仅有的两个相关选择器同样具体。

但是，当您有一个选择器列表包含多个可以匹配同一元素的选择器时，这变得更加相关。让我们假设上面示例中的两个选择器都可以匹配相同的 label 元素。所以我们有两个特异性选择器 (0, 2, 0) 和 (0, 1, 3)，它们都匹配同一个元素。正如我的回答的第一段，特异性等于最具体的选择器（0,2,0）的特异性。它不是，正如人们可能已经猜到的那样，所有匹配选择器的总特异性（0、3、3），或者最不具体的特异性（这将无论如何都说不通）。

这意味着，例如，具有特定性为 (0, 3, 0) 的选择器的单独规则仍将优先于选择器列表，即使该列表中的两个选择器匹配相同的元素。考虑这个人为的例子（你很少在野外找到这样的例子）：

.foo > .bar.baz 
  color: red;


.foo > .bar, nav input:checked + label 
  color: blue;

<nav class="foo">
  <input type="checkbox" id="check" checked>
  <label for="check" class="bar baz">Checkbox</label>
</nav>

请注意，无论复选框是否被选中，label 从不 变为蓝色。这是因为.foo > .bar.baz 的特异性为 (0, 3, 0)，它高于上面给出的两个单独特异性中的每一个，尽管它低于组合特异性，因为特异性永远不会以这种方式组合。

【参考方案2】：

请记住，CSS 是级联的——这意味着如果选择器相同，则在 CSS 文件中进一步引用的样式将优先：

header 
  background-color: red;

p, span, header 
  background-color: yellow;

<header>
  HEADER
</header>

如果我们切换上面的声明，就会发生相反的情况：

p, span, header 
  background-color: yellow;

header 
  background-color: red;

<header>
  HEADER
</header>

如您所见，逗号分隔的选择器/声明没有区别 - 它们的处理方式与您单独完成它们的方式相同。

【参考方案3】：

, 在 CSS 分隔规则中表示列出多个选择器。因此html, body, header 样式将应用于每个html、body 和header，无论其中是否缺少某些内容。它不会为选择器提供任何优先级。

在您的示例中，header 位置将是绝对的，因为第一条规则的优先级低于第二条。同：

header 
    position: relative;


header 
    position: absolute;

【参考方案4】：

在这种情况下，它们都是元素选择器，因此输出的 css 将是底部的，因为 css 是从上到下呈现的，在这种情况下，优先级是最后一个元素。