我正在研究一些CSS,通过阅读,有些伪类没有特定性,例如where()
和not()
。还有更多吗?
答案 0 :(得分:2)
如果检查规格,则可以找到特异性计算的完整细节。我将参考包含所有新选择器的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
)