逗号分隔的组选择器的 CSS 特性 [重复]

Question

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

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

head #title .left a:hover

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

head,#title,.left,a:hover

Answer 1

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

在您的第二个示例中，您有四个选择器。逗号分隔选择器。

§5. Groups of selectors

一个以逗号分隔的选择器列表表示所有选择器的联合 列表中每个单独的选择器选择的元素。

例如，在 CSS 中，当多个选择器共享相同的声明时， 它们可以分组到一个逗号分隔的列表中。

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

这样想：

特异性的目的是确定当有多个选择器针对同一个元素时，哪个 CSS 规则被应用到一个 HTML 元素。

.intro {
  border: 2px dashed red;
}

div {
  border: 1px solid black;
}

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

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

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

你通常不会这样做：

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>

...与特异性无关。