:not 伪类是否增加了选择器的特异性？

Question

我已经阅读了 :not 不应该增加额外特异性的 css 技巧。但看起来确实如此？

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

:not 伪类的特殊性是其参数的特殊性。 :not() 伪类不会增加选择器的特异性，不像其他伪类。

还是我错过了什么？

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

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

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

Answer 1

:not 选择器没有自己的特殊性，但 :not() 内部的选择器有。

From 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>

Answer 2

是的，它增加了它的论点的特殊性。看第一句话：

:not 伪类的特殊性是其参数的特殊性。 :not() 伪类不会增加选择器的特殊性，不像其他伪类。

所以.red:not(.blue) 的特异性等于.red.blue 的特异性——2 个类选择器，或(0, 2, 0)，使其比.red 本身更具体。第二句的意思是:not() 本身 没有提供伪类的额外特异性来使其成为 (0, 3, 0)，就像 .red.blue:hover 中的 :hover例如。