:not()伪类用于排除特定元素应用样式，如p:not(.highlight)为非highlight段落添加边框，li:not(:first-child)为非首个列表项增加上边距，button:not([disabled])使非禁用按钮变蓝，input:not([type=”text”]):not([type=”email”])选中非文本和邮箱类型的输入框，但:not()仅支持简单选择器且不可嵌套复杂结构。
css 中的 :not() 伪类选择器非常实用，它允许你为不匹配某个条件的元素应用样式。换句话说，你可以用它来排除特定元素，避免样式被错误地应用。
基本语法
使用 :not() 的语法很简单：
selector:not(要排除的选择器) { 样式规则 }
括号内可以是任意简单选择器，比如标签名、类名、属性选择器或伪类。
常见使用场景
1. 排除特定类的元素
例如，给所有没有 .highlight 类的段落添加灰色边框：
p:not(.highlight) { border: 1px solid #ccc; }
立即学习“前端免费学习笔记（深入）”；
2. 排除特定标签
比如在列表中，给所有不是第一个的 li 添加上边距：
li:not(:first-child) { margin-top: 8px; }
3. 排除带特定属性的元素
你想让所有没有 disabled 属性的按钮变蓝：
button:not([disabled]) { background-color: blue; color: white; }
4. 组合排除多个条件（支持链式）
你可以嵌套多个 :not()，但注意不能完全实现“多重排除”的逻辑组合，不过可以链式使用：
input:not([type="text"]):not([type="email"]) { background: #f0f0f0; }
这会选中类型不是 text 也不是 email 的 input 元素。
注意事项
:not() 只能包含一个参数，且必须是简单选择器。以下写法是的：
-
:not(.a .b)— 包含复合选择器，不允许 -
:not(div > p)— 使用了关系选择器，不允许
它也不能嵌套另一个 :not() 以外的复杂结构。
基本上就这些。合理使用 :not() 能让你的 CSS 更简洁，减少不必要的类名控制。关键是理解它作用于“非”条件，精准排除不需要样式的元素。