问题
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?
回答1:
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:
- 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.
So basically, the *
never counts and it's the same for :where()
. You can also read that:
neither the
:where
pseudo-class, nor any of its arguments contribute to the specificity of the selector—its specificity is always zero. ref
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)
and its specificity is equal to
a#id
and not to
a.class#id
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)
Which have a specificty equal to 1 class selector (.important
) + 1 pseudo class (:nth-child
) + 2 type selector (a
li
)
来源:https://stackoverflow.com/questions/59362436/which-css-pseudo-classes-dont-have-specificity