:not(.a, .b) 在旧浏览器中失效是因为 CSS Selectors Level 4 多参数语法未支持，IE 完全不支持，Safari ≤15.4、Firefox ≤51、Chrome ≤58 仅支持单参数，遇逗号即整条规则丢弃；需改用 :not(.a):not(.b) 链式写法，且注意其逻辑为“且”非“或”。
为什么 :not(.a, .b) 在旧项目里突然失效
因为浏览器没启用 CSS Selectors Level 4 的多参数语法，:not(.a, .b) 被当作非法语法整条丢弃——DevTools 里会直接划掉这行，连带后面所有声明都不执行。这不是“部分不生效”，是压根没进样式表解析流程。
IE 完全不支持 :not()；Safari ≤15.4、Firefox ≤51、Chrome ≤58 这些旧版本只认单个简单选择器，写逗号就报错。检查时先看浏览器控制台有没有 “Invalid CSS” 提示，再确认目标环境的最低兼容要求。
- 现代项目（Chrome 60+/Firefox 52+/Safari 15.5+）可放心用
:not(.skip, .ignore, [data-exclude]) - 需兼容 Safari 15.4 或更早？必须改用链式写法：
:not(.skip):not(.ignore) - PostCSS + autoprefixer 默认不为
:not()加前缀，它没有历史兼容前缀，别指望靠插件兜底
:not(.a):not(.b) 是“且”不是“或”，这点常被误解
写成 div:not(.skip):not(.ignore)，匹配的是「同时不含 .skip 且不含 .ignore」的 div。如果某个 div 同时有这两个类，它照样被排除——这符合逻辑，但容易让人误以为“只要带其中一个就不该中招”。
真要实现“带任一就排除”，链式写法是对的；但如果你本意是“排除带 .skip 的，同时保留带 .ignore 但不带 .skip 的”，那说明语义冲突了，得回退一步：要么加中间状态类（如 .is-ignored-but-active），要么用 JS 动态控制 class 列表。
- 不要幻想
:not(.a, .b)在老浏览器里能降级为“或”逻辑——它根本不解析 -
:not(.a):not(.b)和:not(.b):not(.a)完全等价，顺序不影响结果 - 如果元素同时有
.a和.b，它不会被选中，这是设计使然，不是 bug
想排除「同时带两个类」的元素，:not() 做不到
CSS 没有原生的「且非」语法。:not(.a.b) 看似合理，但它合法的前提是把 .a.b 当作一个简单选择器（即同时含两个类的元素），而这不是你想表达的“排除同时具备 A 和 B 的情况”——它只是排除那个特定组合类名，和语义无关。
比如你有按钮 ，想排除所有既带 btn 又带 disabled 的按钮，button:not(.btn.disabled) 不起作用，因为 .btn.disabled 是一个完整类名，而你的 HTML 里写的是两个分开的类。
- 正确做法是限定主选择器范围：
button.btn:not(.disabled)—— 先抓所有button.btn，再剔除其中带.disabled的 - 或者换思路：服务端/构建时注入组合类，如
btn--disabled，再用:not(.btn--disabled) - 别试
:not(.btn):not(.disabled)，它排除的是「无 btn 类」或「无 disabled 类」的元素，完全反向
嵌套、伪元素、后代关系这些都踩不得
:not() 括号里只能塞一个简单选择器，任何空格、>、+、:: 都会让整条规则静默失效。比如 p:not(.sidebar p)、button:not(::before)、input:not(:not(.active)) 全部非法。
它只否定当前正在匹配的那个元素自身，不能向上查父级，也不能向下穿透子树。所谓“排除 sidebar 下的 p”，本质是作用域问题，不是否定问题。
- 错误写法：
article p:not(.sidebar p)→ 空格触发丢弃 - 可行替代：
main p { color: red; }+.sidebar p { color: initial; } - 或用属性标记：
p:not([data-skip])，然后在 HTML 中显式加data-skip - 伪元素（
::before）、:has()、:is()等受限伪类都不能放进:not()括号里
真正难的不是怎么写 :not()，而是判断该不该用它。当链式超过 3–4 层，或需要否定 DOM 属性动态变更（比如 JS 设置 el.disabled = true 后旧引擎可能不重绘），就该考虑加语义类或交由 JS 控制。浏览器对深层 :not() 组合的重排重绘开销并不透明，尤其在动画关键路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
