哪些 CSS 伪类没有特异性？

Question

我正在研究一些 CSS，从阅读中可以看到一些没有特异性的伪类，例如where()和not()。还有更多吗？

Answer 1

如果您检查规格，您可以找到特异性计算的完整细节。我将参考CSS 选择器级别 4，其中包括所有新选择器：

\n

\n

对于给定元素，选择器\xe2\x80\x99s 特异性计算如下：

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

\n

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

\n

\n

伪类及其任何参数都不会:where影响选择器的特异性\xe2\x80\x94它的特异性始终为零。^参考

\n

\n

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

\n

a:not(.class) == a.class\na:not(#id):is(.class) == a#id.class\n

\n

但请注意这句话：被其选择器列表参数中最具体的复杂选择器的特异性替换。在不久的将来我们可以写这样的东西：

\n

a:not(.class, #id)\n

\n

其特异性等于

\n

a#id\n

\n

并且不

\n

a.class#id\n

\n\n

考虑到这一点，仅:where()没有任何特异性，或者用更好的话来说，对特异性计算没有贡献。:not()，:is()并且:has()仅根据它们内部的内容进行操作，这与:nth-child()我们在 B 中计算它并且我们还计算它包含的内容不同。

\n

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

\n

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

\n

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

\n