:not()括号内含非法内容（如空格、逗号、多类连写）会导致整条css规则被浏览器静默丢弃；正确排除多个类需链式书写:not(.a):not(.b)，且不提升优先级。
为什么 :not(.ignore) 有时完全没反应
不是样式没生效，而是整条 CSS 规则被浏览器直接丢弃了。只要 :not() 括号里写了非法内容，比如空格、逗号、点连写多个类，规范就认定为语法错误，后续所有声明（包括颜色、边距等）一概不执行。
-
:not(.a.b)❌ 多类名连写不合法，不是“同时有 a 和 b”，而是非法简单选择器 -
:not(div.active)❌ 标签+类组合含空格，等价于后代选择器，被忽略 -
:not(.disabled, .hidden)❌ 逗号分隔在当前所有主流浏览器中均不支持 -
:not(.header .nav)❌ 含空格的后代写法，整条规则静默失效
排除多个类必须链式写 :not():not()
想跳过同时带 .disabled 和 .skip 的元素，不能偷懒合并；:not() 每次只否定一个条件，多个要排除的类只能靠连续拼接，逻辑是“且”——必须全部不满足才命中。
- ✅ 正确：
button:not(.disabled):not(.skip)→ 既没disabled，也没skip - ❌ 错误：
button:not(.disabled, .skip)→ 语法错，整条规则作废 - ⚠️ 注意：如果某个
button同时有这两个类，它依然不会被选中——这符合预期，不是 bug - 权重不变：
:not()链式叠加不提升 specificity，盖不住!important或内联样式
真正想排除「无 class 属性」得用 :not([class])
:not(.foo) 只管有没有 foo 这个类，不管它还有没有别的类；如果你的目标是“连 class 属性都没写”的原始元素，就得换思路。
-
p:not(.intro)→ 匹配<p class="other"></p>，也匹配<p></p> -
p:not([class])→ 只匹配<p></p>，不匹配<p class=""></p>或<p class="x"></p> -
input:not(:disabled):not(:read-only)→ 判断运行时真实状态，比属性存在性更可靠
:not() 对祖先无效，深层嵌套要换方案
.vp-doc p:not(.vp-raw) 只看 p 自身有没有 .vp-raw 类，对 .vp-raw > div > p 这种结构完全无感。指望它跳过整个子树是常见误解。
- ❌ 错误期待：
.vp-doc p:not(.vp-raw)能阻止.vp-raw内部所有p被样式影响 - ✅ 实际可行：
.vp-raw * { all: revert; }→ 让整个子树回退到继承值或 UA 默认值 -
all: revert不是清空，而是撤销作者样式层，把控制权交还给浏览器和继承链
真正容易被忽略的是：:not() 的语义不是“排除某类”，而是“选中不匹配该条件的元素”。这个逻辑翻转一旦理解偏差，就会写出看似合理、实则浏览器压根不解析的 CSS。而且它不改变权重，也不提供撤销能力——CSS 里没有撤销，只有重新声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
