:not()仅支持简单选择器，排除多类组合需用多个:not()链式书写，如button:not(.btn-primary):not(.disabled)；复合选择器如.btn.active会导致整条规则失效。
如何用 :not() 排除带特定类名的元素
直接说结论：:not() 只能接受**简单选择器**（如类名、属性选择器、伪类），不能写复合选择器（比如 .btn.active 或 div.error）。想排除「同时拥有多个类」的元素，得换思路。
常见错误是这么写：button:not(.btn-primary.disabled) { opacity: 0.6; } —— 这在所有浏览器里都无效，CSS 解析器会直接丢弃整条规则。
正确做法是把条件拆开：先选中目标元素，再用 :not() 逐个排除单个类。例如要给「是按钮但不是 primary、也不是 disabled」的元素加样式：
button:not(.btn-primary):not(.disabled) {
opacity: 0.6;
}
注意顺序无关，但逻辑是「同时满足两个 not 条件」，等价于「既没有 .btn-primary，也没有 .disabled」。
:not() 能用哪些选择器？哪些会失效？
支持的类型很明确：单个类名（.error）、单个属性存在（[required]）、单个伪类（:hover、:checked），甚至可以嵌套一个 :not()（如 :not(:not(.active))，但极少用）。
以下写法全部非法，会导致整条 CSS 规则被忽略：
-
div:not(.sidebar .widget)—— 含空格，是后代选择器 -
a:not(.nav-link.external)—— 多类名连写，算一个复合类选择器 -
p:not(#intro)—— ID 选择器虽是简单选择器，但规范允许；不过实践中部分旧版 Safari 对:not(#id)支持不稳定，建议避免
最稳妥的组合是 :not(.a):not(.b):not([data-state="hidden"])，兼容性好，意图清晰。
和 *:not() 搭配时的性能与语义陷阱
别写 *:not(.skip) 去全局排除——这会让浏览器对每个元素都做判断，尤其在长列表或复杂 DOM 中明显拖慢渲染。更糟的是语义混乱：你本意可能是「只对 section 排除 skip 类」，结果却匹配了所有标签。
应该限定上下文：
- ✅
section:not(.skip) h2—— 给「非 skip 的 section 下的 h2」加样式 - ✅
input:not([type="hidden"])—— 排除隐藏输入框，很常用 - ❌
*:not(.ignore) p—— 没必要且低效，改用p:not(.ignore)
另外注意：伪元素（如 ::before）不能作为 :not() 的参数，p:not(::first-line) 是语法错误。
遇到动态类名（如 BEM 或 JS 注入）怎么办？
BEM 风格的 .block__element--modifier 或 JS 动态添加的 .is-loading、.has-error，都可以直接进 :not()，只要它是独立类名。
但要注意：如果 JS 同时加了多个类（比如 el.classList.add('btn', 'btn-danger', 'is-disabled')），而你想排除「是 btn-danger 且 is-disabled」的组合，:not(.btn-danger):not(.is-disabled) 会错杀——它排除的是任一条件成立的元素，而不是两者同时成立。
这时必须换策略：
- 加一个组合类（如
.btn-danger.is-disabled），然后用:not(.btn-danger.is-disabled)—— ✅ 合法，因为这是两个简单选择器的组合（无空格） - 或用 JS 控制 class 切换，让样式逻辑更可控
真正容易被忽略的点是：CSS 里没有「且」的否定表达，:not(A):not(B) ≠ :not(A.B)，前者是「非 A 且 非 B」，后者在语法上根本不允许。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
