用:not(.target)最安全，但括号内仅限单个简单选择器；写错（如:not(.a.b)或:not(.a,.b)）会导致整条css规则被浏览器彻底丢弃，样式完全不生效。
直接结论：用 :not(.target) 最安全，但括号里只能写一个简单选择器；写错（比如 :not(.a.b) 或 :not(.a, .b)）会导致整条 CSS 规则被浏览器彻底丢弃，样式完全不生效。
为什么 :not(.foo) 有时根本没效果
不是选择器没匹配上，而是浏览器压根没解析这条规则——因为括号里写了非法内容。CSS 规范只允许 :not() 接收「简单选择器」，任何带空格、点号连写多个类、标签+类组合，都会让整条规则失效。
-
:not(.disabled.hidden)❌ 多类名不合法（.disabled.hidden是一个简单选择器，但多数旧引擎不认，Safari 13.1 前会静默忽略） -
:not(div.active)❌ 标签+类组合不被接受（含空格 → 后代选择器语法） -
:not(.header .nav)❌ 含空格的后代选择器直接报错 -
:not([class])✅ 合法，能匹配无class属性的元素
如何正确排除多个类名
: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 里没有撤销，只有重新声明。
-
div:not(.active)的特异性 =div(0,0,1,0) +.active(0,0,1,0) = 0,0,2,0，比单纯div高，但不会覆盖div.active { ... !important } - 调试时别只看是否“匹配”，要在 DevTools 的 Styles 面板里确认哪条规则被划掉或未加载
- 动态增删 class 时，
:not()行为稳定，但若依赖属性状态（如:not([disabled])），要注意 HTML 属性存在性与 JS 运行时状态的区别
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
