:not()仅支持简单选择器，非法内容会导致整条规则失效；排除多个类需链式写法如:not(.a):not(.b)；排除无class属性用:not([class])；祖先限制需用all: revert而非:not()。
:not() 只能写简单选择器，写错整条规则直接失效。 它不是“排除某类”，而是“选中不匹配该条件的元素”——这个逻辑翻转容易让人踩坑。
为什么 :not(.foo) 有时完全没效果
最常见原因是括号里写了非法内容。浏览器遇到语法错误会丢弃整条 CSS 规则，后面所有声明都不执行。
-
:not(.a.b)❌ 多类名不被允许（不是简单选择器） -
:not(div.active)❌ 标签+类组合无效 -
:not(.ignore, .skip)❌ 逗号分隔多个类在当前主流浏览器中不支持 -
:not(.header > .nav)❌ 含空格的后代选择器直接让整条规则作废
真正安全的只有：:not(.class)、:not([attr])、:not(button)、:not(:disabled) 这类单一条件。
:not() 链式写法才是排除多个类的正解
想表达“既不是 .disabled，也不是 .hidden”，必须写成两个独立的 :not() 连用，顺序无关，但逻辑是 AND（且关系）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
div:not(.disabled):not(.hidden) { opacity: 1; } - ❌ 错误：
div:not(.disabled, .hidden) { ... }（语法错误） - ⚠️ 注意：如果某个
div同时有.disabled和.hidden，它依然不会被选中——这符合预期，不是 bug
这种写法 specificity 不变，不会因为多写几个 :not() 就变高；也不会提升权重去覆盖 !important 或内联样式。
想排除「完全没有 class 属性」的元素？用 [class] 否定
:not(.foo) 匹配的是“不含 .foo 类”的元素，哪怕它有其他类（比如 class="bar baz"）也会命中。真要限定“连 class 属性都没写”，得换思路：
- ✅
p:not([class])→ 只匹配<p>文本</p>，不匹配<p class=""></p>或<p class="x"></p> - ✅
button:not([disabled]):not([readonly])→ 排除属性存在的元素，和 JS 动态设置的disabled = false无关 - ⚠️
input:not(:disabled):not(:read-only)→ 判断运行时真实状态，更贴近用户交互反馈
深层嵌套下 :not() 无法解决“祖先带某类就跳过”
比如 .vp-doc p:not(.vp-raw) 并不能阻止 .vp-raw 内部的 p 被样式化——因为 :not() 只看目标元素自身，不看它的祖先。
- ❌ 错误期待：
.vp-doc :not(.vp-raw) p→ 以为能跳过所有.vp-raw后代中的p - ✅ 实际替代方案：
.vp-raw * { all: revert; }→ 让.vp-raw下所有后代元素回退到浏览器默认或继承值 - ⚠️ 注意：
all: revert在 Safari 15.4+、Chrome 99+、Firefox 97+ 支持良好，但旧版 Edge 和 IE 完全不支持
复杂嵌套场景下硬塞 :not() 很容易失控，尤其当节点动态增删时；这时候用 all: revert 隔离比层层否定更可靠，也更易维护。
