: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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> -
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 里没有撤销，只有重新声明。
