Question

使用层叠样式表时，我观察了特异性的顺序如下：

第一定律：内联样式
第二定律：ID选择器数量
第3条法律：班级选择者数量
第四定律：元素选择器数量

因此，首先是带有内嵌样式的项，然后是带有一个或多个ID选择器的声明，接着是带有一个或多个类选择器的声明，接着是带有一个或多个元素选择器的声明。更多ID，类和元素分别表示更多优先级。

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

代码示例：

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

上述示例中哪些优先？逗号描述列表是否被视为引用单个元素，在这种情况下，标题仅优先于级联中的最后一个，或者逗号描述列表被视为多个元素，因此优先？或者我是否应该首先考虑其他规则？

Answer 1

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

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

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

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

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

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

有两个复杂的选择器：

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

上述示例中哪些优先？逗号描述列表是否被视为引用单个元素，在这种情况下，标题仅优先于级联中的最后一个，或者逗号描述列表是否被视为多个元素，因此优先？

在您的示例中，selector-list 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.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）的特异性，其高于上面给出的两个个体特异性中的每一个，即使它低于组合特异性，因为特异性从未以这种方式组合。 / p>

Answer 2

请记住，CSS是级联的 - 这意味着假设选择器是相同的，在CSS文件中引用的样式将优先考虑：

＆＃13;

header {
  background-color: red;
}
p, span, header {
  background-color: yellow;
}

＆＃13;

<header>
  HEADER
</header>

＆＃13;

如果我们改变上面的声明，则会发生相反的情况：

＆＃13;

p, span, header {
  background-color: yellow;
}
header {
  background-color: red;
}

＆＃13;

<header>
  HEADER
</header>

＆＃13;

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

Answer 3

在CSS中，,分隔规则意味着列出多个选择器。因此html, body, header样式将应用于每个html，body和header，无论其中是否有某些样式丢失。它不会为选择器提供任何优先级。

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

header {
    position: relative;
}

header {
    position: absolute;
}

Answer 4

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

逗号描述列表的特定性规则

4 个答案: