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

Posted 2023-03-06

【中文标题】:not 伪类是不是增加了选择器的特异性？

【英文标题】：Does the :not pseudo class increase the specificity of a selector?:not 伪类是否增加了选择器的特异性？

【发布时间】：2016-05-04 11:23:12

【问题描述】：

我已经阅读了 :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>

【问题讨论】：

将其与.blue.red 进行比较，.red 仍然很重要

【参考方案1】：

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

From MDN

选择器类型

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

类型选择器（例如h1）和伪元素（例如:before）。 类选择器（例如.example）、属性选择器（例如[type="radio"]）和伪类（例如:hover）。 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>

【讨论】：

哦，我很笨。我想我完全误解了他们在说什么。谢谢。

1) 您需要使用 blockquote 标记，请参阅***.com/help/referencing 2) 这并不能真正解决 :not() 问题。如果有的话，它通过重申“否定伪类 [对特异性没有影响”，加剧了 OP 的困惑。

感谢@BoltClock。 #1 -> 完成。 #2 -> 只保留文档链接，所以我认为消除了混淆。

【参考方案2】：

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

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

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

【讨论】：

@guest271314：因为第一条规则更具体。毕竟，这是一个关于特异性的问题。

@guest271314：我认为没有必要在该主题的每个答案中都包含一个计算特异性的教程。网上有很多资源可以比我在任何单独的答案中更好地解释它

@Ilmari Karonen：你甚至不必总是这样做——你也可以简单地重复任何一个已经在使用的简单选择器，例如.red.red 或 #id#id（尽管它出现在 the latter is bugged in IE）。 :not() 确实可以与类型选择器一起使用 - 请参阅 ***.com/questions/28299817/…

@BoltClock：这要求选择器中已经有一个类或 ID。实际上，我最初使用这个技巧的用例是让a[rel=nofollow] color: green （特异性0,1,1；由用户脚本注入）之类的样式优先于a#someid color: black （特异性1,0,1；已经存在）在网站样式表中）。使用 a[rel=nofollow]:not(#nosuchid)（特异性 1,1,1）可以解决问题。 （当然，!important 也可以使用...除了原来我想覆盖的一些现有样式已经使用!important。）

@Ilmari Karonen：奇怪的是，您的确切用例突然出现了一个问题 - ***.com/questions/35062256/… 想回答它，或者我可以代替你吗？跨度>