哪些 CSS 伪类没有特异性？

Question

我正在学习一点 CSS，并且通过阅读，有一些伪类没有特定性，例如 where() 和 not()。还有更多吗？

Answer 1

如果您检查规范，您可以找到特异性计算的完整细节。我将参考包含所有新选择器的CSS selectors level 4：

对于给定元素，选择器的特异性计算如下：

• 统计选择器中 ID 选择器的数量 (= A)
• 统计选择器中的类选择器、属性选择器和伪类的数量 (= B)
• 计算选择器中类型选择器和伪元素的数量 (= C)
• 忽略通用选择器

如果选择器是选择器列表，则为列表中的每个选择器计算此数字。对于针对列表的给定匹配过程，有效的特异性是列表中匹配的最特定选择器的特异性。

一些伪类为其他选择器提供“评估上下文”，因此专门定义了它们的特殊性：

:is()、:not() 或 :has() 伪类的特异性被其选择器列表参数中最具体的复杂选择器的特异性替换。

类似地，:nth-child() 或 :nth-last-child() 选择器的特异性是伪类本身的特异性（算作一个伪类选择器）加上其选择器列表参数中最具体的复杂选择器的特异性（如果任何）。

:where() 伪类的特异性被零替换。

所以基本上，* 永远不会计数，:where() 也是如此。您还可以阅读：

:where 伪类和它的任何参数都不会影响选择器的特异性——它的特异性总是为零。 ^ref

对于:is()、:not() 和:has()，请考虑里面的内容。这意味着以下选择器具有相同的特异性：

a:not(.class) == a.class
a:not(#id):is(.class) == a#id.class

但要注意这句话：被其选择器列表参数中最具体的复杂选择器的特异性所取代。在不久的将来，我们可以写出类似的东西：

a:not(.class, #id)

其特异性等于

a#id

而不是

a.class#id

---

考虑到这一点，只有:where() 没有任何特异性，或者用更好的词来说，对特异性计算没有贡献。 :not()、:is() 和 :has() 只是仅基于它们内部的内容，不像 :nth-child() 我们在 B 中计算它，我们也计算它包含的内容。

请注意，将来我们可以编写如下内容：

 a:nth-child(-n+3 of li.important)

其具体性等于 1 个类选择器 (.important) + 1 个伪类 (:nth-child) + 2 个类型选择器 (a li)