:not

CSS 中的 :not() 属性是一个否定伪类，接受一个 简单选择器 或选择器列表作为参数。 它匹配不包含参数中表示的元素。 传递的参数可能不包含其他选择器或任何伪元素选择器。

使用 选择器列表 作为参数的功能被认为是实验性的，虽然在撰写本文时，它的支持正在增长，包括 Safari（从 2015 年开始）、Firefox（从 2020 年 12 月开始）和 Chrome（从 2021 年 1 月开始）。

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

在这个例子中，我们有一个无序列表，在 <li> 上有一个类。

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

我们的 CSS 将选择所有 <li> 元素，除了 具有 .different 类别的元素。

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

您也可以使用伪类来实现相同的效果，伪类被认为是 简单选择器。

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

但是，如果我们使用伪元素选择器作为参数，它将不会产生预期结果。

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

复杂选择器

这些 比基本 :not() 选择器更新。

/* select all <p>s that are not descendants of <article> */
p:not(article *) {

}

多嵌套一点，就会变得有点令人费解。 例如

h2:not(:where(article *, section *)) {
  ... 
}

/*
<article>
  <h2> No match! </h2>
</article>

<section>
  <h2> No Match! </h2>
</section>

<aside>
  <h2> Match! </h2>
</aside>
*/

可视化示例

特异性

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

否定不能嵌套，因此 :not(:not(...)) 不允许。 作者还应注意，由于伪元素不被认为是 简单选择器，因此它们不能作为 :not(X) 的参数。 使用属性选择器时要小心，因为一些属性选择器没有像其他属性选择器那样得到广泛支持。 将 :not 选择器与其他 :not 选择器链接是允许的。

浏览器支持

:not() 伪类已在 CSS 选择器级别 4 规范 中更新，以允许参数列表。 在 CSS 选择器级别 3 中，它只能接受单个简单选择器。 因此，浏览器支持在级别 3 和级别 4 草案之间略有不同。

简单选择器

IE	Edge	Firefox	Chrome	Safari	Opera
9+	全部	全部	全部	12.1+	全部

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
全部	全部	全部	全部	全部

选择器列表

更多信息

• CSS 选择器模块级别 3
• CSS 选择器级别 4 规范

相关