是否：不是伪类增加选择器的特异性？ [英] Does the :not pseudo class increase the specificity of a selector?

问题描述

我已经阅读css技巧：不应该添加额外的特异性。但它看起来像这样吗？

https：/ /css-tricks.com/almanac/selectors/n/not/

：非伪类的特殊性是其论证的特异性。

  .red：not（.blue）{background：blue;} red {height：100px; width：100px; background：red;}  

 < div class =red 

解决方案

div>

是的，它增加了其参数的特殊性。请看第一句：

非伪类的特异性是其参数的特异性。

因此，<$>的特殊性不像其他伪类c $ c> .red：not（.blue）等于 .red.blue - 2个类选择器， 2，0），使其比 .red 更具体。第二句意味着：not（） 本身不会贡献伪类的额外特异性来使它（0，像 .red.blue：hover 中的：hover

I have read on css tricks that :not should not add additional specificity. But it looks like it does?

https://css-tricks.com/almanac/selectors/n/not/

The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.

Or am I missing something?

.red:not(.blue) {
  background: blue;
}

.red {
  height: 100px;
  width: 100px;
  background: red;
}

<div class="red">
</div>

解决方案

Yes, it adds the specificity of its argument. Look at the first sentence:

The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.

So the specificity of .red:not(.blue) is equal to that of .red.blue — 2 class selectors, or (0, 2, 0), making it more specific than .red on its own. What the second sentence means is that the :not() itself does not contribute the additional specificity of a pseudo-class to make it (0, 3, 0), like the :hover in .red.blue:hover does for example.

这篇关于是否：不是伪类增加选择器的特异性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！