哪个CSS伪类没有特异性?
Which CSS pseudo-classes don't have specificity?
我正在研究一些 CSS,从阅读中可以看出一些伪 类 没有特异性,例如 where()
和 not()
。还有吗?
如果您查看规范,您可以找到特异性计算的完整细节。我将参考包含所有新选择器的 CSS selectors level 4:
A selector’s specificity is calculated for a given element as follows:
- 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:
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.
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).
The specificity of a :where()
pseudo-class is replaced by zero.
所以基本上,*
永远不会计数,: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()
你考虑里面的东西。这意味着以下选择器具有相同的特殊性:
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 个 class 选择器 (.important
) + 1 个伪 class (:nth-child
) + 2 个类型选择器 (a
li
)
我正在研究一些 CSS,从阅读中可以看出一些伪 类 没有特异性,例如 where()
和 not()
。还有吗?
如果您查看规范,您可以找到特异性计算的完整细节。我将参考包含所有新选择器的 CSS selectors level 4:
A selector’s specificity is calculated for a given element as follows:
- 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:
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.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).The specificity of a
:where()
pseudo-class is replaced by zero.
所以基本上,*
永远不会计数,: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()
你考虑里面的东西。这意味着以下选择器具有相同的特殊性:
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 个 class 选择器 (.important
) + 1 个伪 class (:nth-child
) + 2 个类型选择器 (a
li
)