:not pseudo class 是否增加了选择器的特异性？

Question

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

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.

还是我遗漏了什么？

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

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

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

Answer 1

:not 选择器没有它自己的特性，但是 :not() 里面的选择器有。

From MDN

Selector Types

The following list of selector types is by increasing specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., :before).

Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g., #example).

Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

因为您有规则 .red:not(.blue) 而元素 <div class="red"> 没有 class 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

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

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.

所以 .red:not(.blue) 的特异性等于 .red.blue — 2 class 选择器，或 (0, 2, 0)，使其比 [=12 更具体=] 自己。第二句的意思是 :not() 本身不贡献 pseudo-class 的额外特异性使其成为 (0, 3, 0)，就像例如 .red.blue:hover 中的 :hover。

:not pseudo class 是否增加了选择器的特异性？

Does the :not pseudo class increase the specificity of a selector?

html

css

css-selectors

css-specificity

Selector Types