:非伪类是否会增加选择器的特异性？

Question

我已经读过css技巧:不应该添加额外的特异性.但它看起来像吗？

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

非伪类的特殊性是其论证的特殊性.与其他伪类不同,:not()伪类不会添加到选择器特性.

或者我错过了什么？

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

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

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

Answer 1

是的,它增加了其论点的特殊性.看第一句话:

非伪类的特殊性是其论证的特殊性.与其他伪类不同,:not()伪类不会添加到选择器特性.

因此,特异性.red:not(.blue)等于.red.blue-2个类选择器,或(0,2,0),使其更具体.red.什么是第二句话的意思是,:not() 本身不参与一个伪类的附加特性,使之(0,3,0),就像:hover在.red.blue:hover做例如.

Answer 2

该:not选择不具有它自己的特殊性,但是选择里面:not()确实有.

来自MDN

选择器类型

以下选择器类型列表是通过增加特异性:

1. 类型选择器(例如h1)和伪元素(例如:before).
2. 类选择器(例如.example),属性选择器(例如[type="radio"])和伪类(例如:hover).
3. ID选择器(例如#example).

通用选择器(*),组合子(+,>,~,' ')和否定伪类(:not())对特异性没有影响.(:not()然而,在内部声明的选择器.)

当您拥有规则.red:not(.blue)且元素<div class="red">没有类时blue,将应用规则.

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

.red {
  height: 100px;
  width: 100px;
  background: red;
}
div {
  background: green;
  width: 50px;
  height: 50px;
  margin: 10px;
}

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