:not(.disabled)有时不生效，是因为它只接受单个简单选择器，若写成:not(div.disabled)或:not(.btn.disabled)等复合形式，浏览器会整条规则丢弃；正确用法是如.btn:not(.disabled)来排除同时含两者的元素。
为什么 :not(.disabled) 有时不生效
直接写 :not(.disabled) 看似合理，但容易忽略它的限制：它只接受「简单选择器」，不能写成 :not(div.disabled) 或 :not(.btn.disabled)。浏览器会直接报错并丢弃整条规则。如果你的目标是排除同时带 .btn 和 .disabled 的元素，得换思路。
想排除「同时拥有两个类」的元素怎么办
CSS 没有原生的「且非」语法，:not() 不支持复合类名。可行方案是用「交集 + 否定组合」：
- 先用通用选择器匹配目标元素（比如
.btn） - 再用
:not()剔除明确带.disabled的——只要它写了这个类，就不管其他类是否共存 - 所以写成
.btn:not(.disabled)是合法且有效的，它选中所有带.btn但不带.disabled的元素
错误写法示例：.btn:not(.btn.disabled) → 语法非法；正确写法就是 .btn:not(.disabled)。
:not() 能嵌套或连用吗
不能嵌套，比如 :not(:not(.active)) 是无效语法；但可以链式使用，例如 input:not([type="hidden"]):not([disabled])，这表示排除 type 为 hidden 且 排除 disabled 状态的 input——注意这是「逐个否定」，不是「逻辑与否定」。
- 多个
:not()是「同时满足前面所有条件，并分别排除」 - 它不等价于
:not([type="hidden"][disabled])（后者想表达「同时具备两个属性」，但同样非法） - 真要排除「同时有 A 和 B」，只能靠 JS 或调整 HTML 结构（比如加一个组合类
.hidden-disabled）
兼容性和性能要注意什么
:not() 在现代浏览器中支持良好，但 IE8 及以下完全不支持；IE9 支持单参数简单形式（如 :not(.x)），不支持属性选择器写法（如 :not([href])）。
- 复杂度高时（比如
:not(.a):not(.b):not(.c)连写十多个），部分旧版 Safari 渲染可能变慢 - 避免在动画关键路径上用深层
:not()组合，重排重绘开销可能隐性上升 - 如果逻辑太绕，宁可多加一个语义类（如
.is-interactive），比靠 CSS 否定更可控
最常被忽略的一点：:not() 的优先级和它包裹的选择器一致，.item:not(.disabled) 的权重等于 .item.disabled，不是更低——别指望靠它“降权”来覆盖样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
