CSS中的:not()伪类选择器详解

描述
:not() 是一个CSS伪类选择器，属于“否定伪类”，它用于选择不匹配指定选择器的元素。这个选择器在实际开发中非常实用，可以让你在编写CSS时更精准地排除某些元素，避免添加额外的类名，使得代码更加简洁和语义化。其核心功能是“反选”。

核心语法

:not( <complex-selector> ) { /* 样式声明 */ }

括号 () 内的 <complex-selector> 是指一个不包含 :not() 本身的选择器（在CSS4标准中，允许在 :not() 内使用更复杂的选择器，但浏览器支持度不一，需谨慎使用）。选择器列表中不能包含另一个否定选择器，且伪元素也不能作为 :not() 的参数。

循序渐进讲解

第一步：基础理解与简单排除
:not() 最简单的用法是排除单个元素类型。

/* 选中所有不是 <div> 的元素 */
p:not(div) {
  color: red;
}
/* 选中所有不是具有 .special 类的段落 */
p:not(.special) {
  font-weight: normal;
}

第二步：参数可以是更复杂的选择器
：not() 的参数可以是一个复合选择器，用于更精确地排除。

/* 选中所有不是链接的 <a> 标签（比如没有href属性） */
a:not([href]) {
  color: gray;
  cursor: default;
}
/* 选中所有不是第一个子元素的列表项 */
li:not(:first-child) {
  margin-top: 10px;
}

第三步：链式使用与组合逻辑

1. 链式使用： 可以连续使用多个 :not() 来同时满足多个排除条件。这实现了逻辑“与”（AND）的效果。

   /* 选中所有不是第一个、也不是最后一个子元素的 <p> 标签 */
   p:not(:first-child):not(:last-child) {
     padding: 10px 0;
   }
   

2. 在组合选择器中使用： :not() 可以与其他选择器组合，以实现更复杂的逻辑。

   /* 在列表内，选中所有非最后一个、且不包含 .disabled 类的列表项，并给其后添加分隔线 */
   ul li:not(:last-child):not(.disabled) {
     border-bottom: 1px solid #ccc;
   }
   

第四步：理解特异性与优先级
:not() 本身不增加选择器的特异性（Specificity），但其内部参数选择器的特异性会计算在内。

/* 示例1：特异性为 (0,1,1) = 1个类 + 1个元素 */
.special:not(p) { color: blue; }

/* 示例2：特异性为 (0,1,0) = 1个类 */
.special { color: red; }

如果以上两个规则同时作用于同一个具有 .special 类的 div 元素，div.special 会匹配两条规则。由于 :not(p) 的参数是一个元素选择器 p，其特异性为 (0,0,1)。所以第一条规则的特异性是 .special 的 (0,1,0) 加上 p 的 (0,0,1)，总特异性为 (0,1,1)，高于第二条的 (0,1,0)。因此，最终该 div 会显示蓝色。

第五步：常见误区与注意事项

1. 不能嵌套使用： 在CSS3标准中，:not() 内部不能再包含另一个 :not()。例如 :not(:not(...)) 是无效的。
2. 参数不能是伪元素： 例如 :not(::before) 是无效的。
3. 对性能的影响： 过度复杂或深层嵌套的 :not() 选择器（尤其是在大型DOM中）可能会影响样式匹配的效率。浏览器需要检查更多元素是否不匹配该参数，因此建议保持参数选择器尽量简单。
4. 与 :where() 的区别： :where() 选择器将其内部参数的特异性降为0，而 :not() 会保留其参数的特异性。这是它们关键的区别之一。

第六步：实战应用示例
场景：你想为表单中所有必填（required 属性）且未禁用的输入框添加一个特殊的背景色提示，但排除 checkbox 和 radio 类型。

/* 选择所有 input、textarea、select 元素 */
input:not([type="checkbox"]):not([type="radio"]):not(:disabled):required,
textarea:not(:disabled):required,
select:not(:disabled):required {
  background-color: #fff9e6; /* 淡黄色背景 */
  border-color: #ffcc00;
}

这个例子清晰地展示了如何将多个 :not() 与属性选择器、状态伪类组合，实现精细化的样式控制，而无需在HTML中添加额外的类名。

总结
:not() 伪类选择器是一个强大的CSS工具，它通过“排除法”来应用样式，增强了选择器的表达能力。掌握其语法、特异性计算和组合使用技巧，能帮助你写出更简洁、更易维护的CSS代码，尤其是在处理组件库、主题定制或第三方内容样式重置时特别有用。始终记住，保持其参数简单以确保最佳性能。