:not(.a, .b) 在旧浏览器中整条规则被静默丢弃，因 CSS3 规范仅支持单个简单选择器；应改用 :not(.a):not(.b)，且需注意其逻辑为“且”非“或”。
为什么 :not(.a, .b) 在老项目里完全没反应
不是样式没生效，是整条 CSS 规则被浏览器静默丢弃。CSS Selectors Level 3 规范只允许 :not() 接收**单个简单选择器**，括号里写逗号属于语法错误。DevTools 里那行会直接变灰，控制台也不报错——你写了等于白写。
IE 完全不支持 :not()；Safari ≤15.4、Firefox ≤51、Chrome ≤58 这些旧版本遇到 :not(.a, .b) 就整条跳过，连带后面所有声明都不解析。
- ✅ 安全写法：
div:not(.a):not(.b) - ❌ 失效写法：
div:not(.a, .b)（Level 4 语法，生产环境别赌兼容性） - ⚠️ 检查方法：打开 DevTools → Elements 面板 → 找到对应样式行，如果整行被划掉且标着 “Invalid CSS”，基本就是这个原因
:not(.a):not(.b) 是“且”不是“或”，这点必须清醒
它匹配的是「同时不含 .a 且不含 .b」的元素。如果某个 div 同时有这两个类，它不会被选中——这符合逻辑，但容易让人误以为“只要带其中一个就不该中招”。
- 想排除「带
.skip或带.ignore」的元素？链式写法是对的：button:not(.skip):not(.ignore) - 但如果你本意是「保留带
.ignore的按钮，只要它不带.skip」，说明语义冲突了，得回退：加中间状态类（如.is-ignored-but-active），或用 JS 控制 class 列表 -
:not(.a):not(.b)和:not(.b):not(.a)完全等价，顺序不影响结果
哪些值能塞进 :not() 括号里，哪些一写就废
:not() 只认简单选择器：单个类名、ID、标签、属性、单个伪类。任何含空格、组合器、逗号、嵌套结构，都会让整条规则失效。
- ✅ 合法：
:not(.disabled)、:not([type="hidden"])、:not(:checked)、:not(button) - ❌ 静默失效：
:not(.header .nav)（空格 → 后代选择器）、:not(.a.b)（Safari ≤15.4 不认）、:not(:not(.active))（嵌套非法）、:not(::before)（伪元素不可选中） - ⚠️ 常见误判：
:not(div.active)看似合理，但含空格 → 实际是非法后代写法，会被忽略
链式太多时，优先考虑显式重置而非硬凑 :not()
超过 3–4 层 :not() 连写，不仅可读性下降，匹配性能也略低（浏览器得逐个判断每个条件）。更重要的是，它无法表达“同时具备 A 和 B 才排除”这类逻辑。
- 比如要排除既带
.btn又带.disabled的按钮，button:not(.btn.disabled)没用——因为 HTML 里是两个分开的类，.btn.disabled是一个完整类名 - 更稳的做法是正向定义：
button { background: #007bff; }+button.disabled, button[disabled] { background: #ccc; } - 复杂状态建议用语义类兜底，比如加
.is-excluded，比在:not()里拼逻辑更可靠
真正难的不是怎么写 :not()，而是判断该不该用它——当排除条件开始依赖 DOM 结构、动态属性变更或组合状态时，它已经不是最合适的工具了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
