用 :not(.target) 最安全，但括号内仅限单个简单选择器；语法错误（如 :not(.a.b)）会导致整条规则被浏览器丢弃；排除多个类需链式写 :not():not()，且 :not() 仅作用于目标元素自身，不涉及祖先或后代。
直接说结论：用 :not(.target) 最安全，但括号里只能写单个类名、单个属性或单个标签；写错语法（比如 :not(.a.b)）会导致整条 CSS 规则被浏览器丢弃，样式完全不生效。
为什么 :not(.foo) 有时根本没效果
不是选择器没匹配上，而是浏览器压根没解析这条规则——因为括号里写了非法内容。CSS 规范只允许 :not() 接受「简单选择器」，任何带空格、点号连接多个类、标签+类组合，都会让整条规则失效。
-
:not(.disabled.hidden)❌ 多类名不合法 -
:not(div.active)❌ 标签+类组合不被接受 -
:not(.header .nav)❌ 含空格的后代选择器直接报错 -
:not([class])✅ 合法，能匹配无class属性的元素
想排除多个类，必须链式写 :not()
:not() 每次只否定一个条件，多个要排除的类不能用逗号分隔，得连写。逻辑是“且”不是“或”——只有同时不满足所有条件的元素才会被选中。
- ✅ 正确：
p:not(.skip):not(.ignore)→ 既没skip也没ignore - ❌ 错误：
p:not(.skip, .ignore)→ 语法错误，整条规则作废 - ⚠️ 注意：如果某
p同时有skip和ignore，它依然不会被上面那条匹配到——这符合预期
别指望 :not() 能跳过祖先带某类的后代元素
.vp-doc p:not(.vp-raw) 这种写法，只会排除那些 p 元素自己带 .vp-raw 类的情况，对 .vp-raw 内部嵌套的 p 完全无效。因为 :not() 只看目标元素自身，不查它的父辈。
- ❌ 错误期待：以为能阻止
.vp-raw下所有p被.vp-doc的样式影响 - ✅ 实际可行方案：
.vp-raw * { all: revert; }—— 让整个子树回退到继承值或浏览器默认值 - ⚠️
all: revert不是清空样式，而是撤销作者样式层，把控制权交还给继承链和 UA 默认值
真正容易被忽略的点是：:not() 的语义不是“排除某类”，而是“选中不匹配该条件的元素”。这个逻辑翻转一旦理解偏差，就会写出看似合理实则完全不执行的 CSS。而且它不改变选择器权重，也不提供“撤销”能力——CSS 里没有撤销，只有重新声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
