哪些CSS伪类没有特定性？ [英] Which CSS pseudo-classes don't have specificity?

问题描述

我正在研究一些CSS，通过阅读有一些伪类没有特定性，例如 where（）和 not（）。还有更多吗？

I'm studying a bit of CSS and from reading there are some pseudo-classes that don't have specificity like where() and not(). Are there more?

推荐答案

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

If you check the specification you can find the full detail of specificity calculation. I am going to refer to CSS selectors level 4 that include all the new selectors:

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

A selector’s specificity is calculated for a given element as follows:

• 计算选择器中ID选择器的数量（= A）


• 计算选择器中的类选择器，属性选择器和伪类的数量（ = B）


• 计算选择器中类型选择器和伪元素的数量（= C）


• 忽略通用选择器

• count the number of ID selectors in the selector (= A)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
• count the number of type selectors and pseudo-elements in the selector (= C)
• ignore the universal selector

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

If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.

一些伪类提供了评估上下文 ，其他的选择器的特殊性也要特别定义：

A few pseudo-classes provide "evaluation contexts" for other selectors, and so have their specificity defined specially:

：is（）的特殊性， ：not（）或：has（）伪类被最特殊的

The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.

类似地，：nth-​​child（）或：nth-​​last-child（）选择器是伪类本身的特异性（作为一个伪类选择器）加上最特定的伪类

Analogously, the specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument (if any).

：where（）伪-

所以基本上， * ne ver计数，与：where（）相同。您还可以阅读以下内容：

So basically, the * never counts and it's the same for :where(). You can also read that:

既不是：where 伪类，也不是它的任何参数都有助于选择器的特异性-其特异性始终为零。 ^参考

neither the :where pseudo-class, nor any of its arguments contribute to the specificity of the selector—its specificity is always zero. ^ref

对于：is（），：not（）和：has（）您会考虑其中的内容。这意味着以下选择器具有相同的功能：

For :is(), :not() and :has() you consider what is inside. This means that the following selector have the same speficity:

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

但是请注意以下句子：被其选择器列表参数中最具体的复杂选择器的特殊性取代。在不久的将来，我们可以编写以下内容：

But pay attention to the sentence: is replaced by the specificity of the most specific complex selector in its selector list argument. In the near future we can write something like :

a:not(.class, #id)

，其特异性等于

a#id

而不要

a.class#id

---

考虑到这一点，只有：where（）没有任何特异性，或者用更好的话来说，对特异性计算没有帮助。 ：not（），：is（）和：has（）根据其内部内容进行操作，但仅进行操作，这与：nth-​​child（）不同，我们将其计入B，计算包含的内容。

---

Considering this, only :where() doesn't have any specificity or, to use better words, doesn't contribute to the specificity calculation. :not(), :is() and :has() do but only based on what they have inside, unlike :nth-child() where we count it in the B and we also count what it contains.

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

Note that in the future we can write something like below:

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

具有等于​​1个类选择器（ .important ）+ 1个伪类（：nth-​​child ）的特异性+ 2种类型选择器（ a li ）

Which have a specificty equal to 1 class selector (.important) + 1 pseudo class (:nth-child) + 2 type selector (a li)

这篇关于哪些CSS伪类没有特定性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！