CSS 逗号分隔组选择器的特殊性

Question

计算逗号分隔组选择器特异性的正确方法是什么？

下面选择器的特异性，例如，是0,1,2,2（1代表head，1代表a，10代表.left，10代表:hover，#title 为 100）：

head #title .left a:hover

这个选择器有什么特点？会不会也是0,1,2,2？或者这是否被视为多个选择器，并且必须为每个选择器计算特异性？

head,#title,.left,a:hover

Answer 1

在您的第一个示例中，您有一个选择器。它是由多个 simple selectors separated by descendant combinators 组成的选择器。但它仍然是一个选择器。

在你的第二个例子中你有四个选择器。逗号分隔选择器。

§5. Groups of selectors

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.

For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list.

特异性适用于单个选择器，因此在代表四个不同选择器的第二个示例中，您需要分别计算每个选择器的特异性。

这样想：

特异性 的目的是确定当有多个选择器定位时哪个 CSS 规则应用于 HTML 元素 相同元素.

.intro {
  border: 2px dashed red;
}

div {
  border: 1px solid black;
}

<div class="intro">text</div>

上面的两个选择器都针对同一个元素。 class 选择器比类型选择器 (10 v 1) 更具特异性，因此 class 获胜。

另一方面，以逗号分隔的选择器列表将相同的规则应用于不同的元素，因此特异性不是问题。

你通常不会这样做：

div, .intro {
  border: 1px solid black;
}

<div class="intro">text</div>

...因为它是多余的。

逗号分隔是为了合并这样的选择器：

h1, h2, h3 {
  color: red;
}

<h1>text</h1>
<h2>text</h2>
<h3>text</h3>

...与特异性无关

CSS 逗号分隔组选择器的特殊性

CSS specificity of comma-separated group selector

css

css-selectors

css-specificity