: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 或内联样式。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

想排除「完全没有 class 属性」的元素？用 [class] 否定

:not(.foo) 匹配的是“不含 .foo 类”的元素，哪怕它有其他类（比如 class="bar baz"）也会命中。真要限定“连 class 属性都没写”，得换思路：

• ✅ p:not([class]) → 只匹配

  文本

  ，不匹配
  或

• ✅ 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 隔离比层层否定更可靠，也更易维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！