:not(.classname)匹配不含该类的元素，而非无class属性的元素；:not([class])才匹配无class属性的元素；排除多个类需链式写法:not(.a):not(.b)，不可用:not(.a,.b)。
:not(.classname) 能直接选中所有不带该类的元素，但它不是“没有 class 属性”的判断——这是最常误用的点。
为什么 :not(.active) 会选中
:not() 做的是逻辑否定：只要元素不匹配括号里的选择器，就入选。它不关心有没有 class 属性，只看是否“有 .active 这个类”。
-
→ 没任何类 → 不匹配.active→ ✅ 被选中 -
→ 有类，但没active→ 不匹配.active→ ✅ 被选中 -
→ 匹配.active→ ❌ 被排除
换句话说，它等价于「非 active」，不是「空 class」。
想选真正没有 class 属性的元素？用 :not([class])
只有 :not([class]) 才严格匹配那些压根没写 class 属性的标签。
-
文本
class属性 → ✅ 匹配 -
空class
class属性（哪怕为空）→ ❌ 不匹配 -
有值
注意：[class] 是属性存在选择器；别写成 [class=""]，那只会匹配空字符串值，漏掉带值的情况。
:not(.a):not(.b) 是唯一兼容的多类排除写法
CSS Level 3 不支持 :not(.a, .b) 这种逗号分隔语法——浏览器会直接忽略整条规则。
- ✅ 正确：
div:not(.disabled):not(.hidden)→ 同时排除两类（逻辑 AND） - ❌ 无效：
div:not(.disabled, .hidden)→ 解析失败，样式不生效 - ⚠️ 注意：
:not(.a):not(:hover)合法，但伪类顺序不影响结果，只影响可读性
虽然 CSS Level 4 已允许逗号写法，但截至 2026 年 5 月，主流浏览器落地仍不统一，链式写法仍是稳妥选择。
权重和兼容性容易被忽略的细节
:not() 自身不增加特异性，但括号内选择器的权重会被计入。例如 div:not(.active) 的特异性 = div + .active = (0,1,1)，比单纯 div (0,0,1) 更高。
- IE8 及以下完全不支持
:not()，需 JS 补充或加降级 class - 嵌套
:not(:not())或:not(div p)在 CSS3 中非法，现代浏览器也普遍不支持 - 避免在大范围选择器（如
*:not(.ignore)）中滥用，可能触发重排/重绘性能问题
真正难的不是写对语法，而是每次用前得想清楚：你到底要排除「带某个类」，还是「有 class 属性」，或是「某个结构位置」——这三个意图对应完全不同的选择器写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
