CSS 选择器 :not

:not 选择器用于选取不匹配给定模式的元素。它允许开发者排除特定类型的元素，从而实现更灵活的选择和样式化。

基本概念

:not 选择器是一个伪类选择器，它接收一个参数，该参数可以是任何有效的选择器或选择器组合。它返回所有不匹配该参数的选择器的元素。

示例

// www.javascriptcn.com code example
/* 选择所有不是 .special 类的元素 */
:not(.special) {
  color: blue;
}

/* 选择所有不是 <p> 元素的元素 */
:not(p) {
  font-weight: bold;
}

/* 选择所有不是 .special 类的 <div> 元素 */
div:not(.special) {
  background-color: lightgray;
}

使用场景

:not 选择器常用于排除特定类型的元素，或者当需要对一组元素进行样式化时排除其中某些特定元素。

排除特定元素

有时我们需要对一组元素进行样式化，但同时需要排除某些特定元素。这时就可以使用 :not 选择器。

// www.javascriptcn.com code example
<div class="container">
  <p>这是一个段落。</p>
  <span>这是一个 span 元素。</span>
  <p class="special">这是一个特殊类的段落。</p>
</div>

<style>
.container p:not(.special) {
  color: red;
}
</style>

在这个例子中，只有第一个段落会被选中并设置为红色文本，因为第二个段落没有 special 类，而第三个段落有 special 类，所以不会被选中。

结合其他选择器

:not 选择器也可以和其他选择器结合使用，以实现更复杂的样式需求。

// www.javascriptcn.com code example
<ul>
  <li class="item">列表项 1</li>
  <li class="item special">列表项 2</li>
  <li class="item">列表项 3</li>
</ul>

<style>
.item:not(.special) {
  color: green;
}
</style>

在这个例子中，只有前后的两个列表项会被选中并设置为绿色文本，中间的列表项由于带有 special 类，所以不会被选中。

注意事项

• 不同浏览器对 :not 选择器的支持程度可能有所不同。
• :not 选择器只能接受一个参数，如果需要排除多个条件，则需要嵌套使用。
• :not 选择器不能包含另一个 :not 选择器作为其参数。

实战案例

假设我们有一个包含多个按钮的页面，希望将所有按钮都设置为蓝色背景，但不包括那些具有 .disabled 类的按钮。

// www.javascriptcn.com code example
<button>点击我</button>
<button class="disabled">不可点击</button>
<button>点击我</button>

<style>
button:not(.disabled) {
  background-color: blue;
  color: white;
}
</style>

在这个例子中，所有按钮都会被设置为蓝色背景，除了带有 .disabled 类的按钮。