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

Question

在使用级联样式表时，我观察到了以下特定顺序：

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

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

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

代码示例：

html, body, header {
  position: absolute;
  top: 0px;
}
header {
  position: relative;
  top: 50px;
}

在上面的示例中，什么优先？逗号描述的列表是否被视为引用单个元素，在这种情况下，标头仅会在级联中排在最后就优先考虑，还是逗号描述的列表被视为多个元素，因此具有优先级？还是我应该首先考虑其他规则？

Answer 1

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

严格来说，选择器列表没有自己的特异性值，但是出于级联的目的，选择器列表的特异性等于与该元素匹配的最特定选择器的特异性。当前规范中没有明确说明，但出现在选择器4中。即使这样，由于选择器列表不过是在单个表达式中组合两个或多个选择器而不必重复其样式声明的方法，因此为什么这样做会有意义。

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

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

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

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

有两个复杂的选择器：

1. .foo > .bar，其特异性为（0，2，0）
2. nav input:checked + label，其特异性为（0，1，3）

在上面的示例中，什么优先？逗号描述的列表是否被视为引用单个元素，在这种情况下，标头仅会在级联中排在最后就优先考虑，还是逗号描述的列表被视为多个元素，因此具有优先级？

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

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

这意味着，例如，即使选择器列表中的两个选择器都匹配同一元素，其选择器的特异性为（0，3，0）的单独规则仍将优先于选择器列表。考虑一下这个人为的示例（您很少会在野外找到示例）：

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

.foo > .bar.baz {
  color: red;
}

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

请注意，无论是否选中该复选框，其都label 不会变成蓝色。这是因为.foo > .bar.baz具有（0，3，0）的特异性高于上面给出的两个单独的特异性，尽管它比结合的特异性要低，因为特异性从未以这种方式结合。