Web前端：not（否定伪类选择器）
not（否定伪类选择器）
CSS中的 :not() 选择器是⼀个否定伪类选择器，它⽤于选择不符合给定选择器的元素。这是⼀种排除特定元素的⽅法，可以⽤来简 化复杂的选择器，提⾼ CSS 规则的灵活性和精确性。
:not() 选择器的基本语法如下：
selector:not(selector-to-exclude) {/* 样式规则 */
}selector：基础选择器（如元素、类、ID 等）。selector-to-exclude：要排除的选择器（可以是简单或复合选择器）。
核心特性
排除特定元素
选择所有满足基础选择器条件，但不满足括号内选择器条件的元素。支持简单选择器
:not()的参数可以是：类型选择器（如
div）类选择器（如
.class）ID 选择器（如
#id）属性选择器（如
[type="text"]）伪类（如
:first-child）
不支持复杂选择器（旧版本限制）
在 CSS3 中，:not()的参数不能包含组合器（如空格、>、+），但 CSS4 允许更复杂的参数（需注意浏览器兼容性）。
示例：
1、排除特定元素
如果你想为所有除了特定类之外的 <p> 元素应⽤样式，可以这样写：
p:not(.exclude) {color: red;
}这将会选择所有没有 .exclude 类的 <p> 元素，并将它们的⽂本颜⾊设置为红⾊。
效果展示：
2、排除多个元素
:not() 选择器可以包含多个条件，⽤于排除多个元素：
div:not(.exclude, .ignore) {background-color: lightblue;
}这将选择所有不含有 .exclude 或 .ignore 类的 <div> 元素，并为它们设置浅蓝⾊背景。
效果展示：
3、结合其他选择器
:not() 可以与其他选择器结合使⽤，以创建更具体的规则：
a:not([href*="http://"]) {color: green;
}这将会选择所有 href 属性不包含 "http://" 的 <a> 元素，并将它们的⽂本颜⾊设置为绿⾊。
注意事项
优先级计算
:not()的优先级由其参数决定。例如：div:not(.class)的优先级 =div+.class（0,0,1 + 0,1,0 = 0,1,1）。
不可嵌套伪元素
:not()内不能包含伪元素（如::before）。
总结
| 特性 | 说明 |
|---|---|
| 作用 | 排除匹配指定选择器的元素 |
| 参数限制 | CSS3：仅支持简单选择器；CSS4：支持逗号分隔的复杂选择器（需注意兼容性） |
| 优先级 | 由基础选择器和括号内选择器共同决定 |
| 典型用例 | 过滤禁用元素、排除特定类/属性、非首尾子元素样式等 |
通过灵活使用 :not()，可以大幅简化 CSS 代码，避免编写冗余的覆盖样式。