:not(.a, .b) 静默失效是因为 css level 3 中 :not() 仅支持单个简单选择器，逗号分隔属语法错误；正确写法是链式 :not(.a):not(.b)，表示“既不匹配.a也不匹配.b”的并列条件。
为什么 :not(.a, .b) 会静默失效
浏览器直接忽略整条 CSS 规则，DevTools 里整行被划掉并标“Invalid CSS”。这不是样式没生效，是选择器根本没被解析——因为 :not() 括号内只允许单个简单选择器，逗号分隔的多个选择器（如 .a, .b）属于语法错误。Chrome/Firefox 最新版本虽已实验性支持 Level 4 的多参数语法，但 Safari ≤16.6 仍完全不认，生产环境不能依赖。
正确写法：链式 :not() 是唯一可靠方案
想排除同时带 .disabled 或 .hidden 的元素，必须写成：div:not(.disabled):not(.hidden)。这不是“先排除 disabled、再从剩余中排除 hidden”，而是并列判断：元素必须既不匹配 .disabled，也不匹配 .hidden，才被选中。
- 等价逻辑是「且」关系，不是「或」
- 顺序无关：
:not(.a):not(.b)和:not(.b):not(.a)效果一致 - 如果元素同时有两者（
class="disabled hidden"），照样被排除 - 不能简写为
:not(.disabled.hidden)——这表示“排除同时拥有两个类的元素”，语义完全不同
常见踩坑点：你以为在排除，其实规则已被丢弃
以下写法都会导致整条规则静默失效，且无报错提示：
-
li:not(.nav > li)—— 含空格和组合器，非法复合选择器 -
button:not(.primary:hover)—— 伪类连用，:hover不允许出现在:not()内部（:checked等少数伪类除外） -
input:not([type="text"][disabled])—— 属性选择器连写在部分旧引擎中兼容性差，建议拆开或改用 JS 控制 -
p:not(.sidebar p)—— 想排除某父容器下的子元素？:not()无法穿透 DOM 层级，只能作用于当前元素自身
复杂排除逻辑建议绕过 :not()
当条件变多（比如要排除「有 A 类或 B 类，且状态为 disabled」），硬凑 :not() 链会迅速变得难读、难维护、权重失控。更稳的做法是：
- 加一个语义化类，如
.excluded，由 JS 或模板逻辑统一控制 - 正向限定作用域，例如用
.main-content p替代p:not(.sidebar p) - 用层叠覆盖：先设通用样式，再对需排除的区域单独重置
- 避免在
:not()中混用高权重选择器（如 ID），否则优先级容易意外压过其他规则
真正麻烦的从来不是怎么写，而是该不该用——:not() 是选择器过滤器，不是样式开关；选不中，就彻底没机会渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
