:not(.classname)匹配不含该类的元素，而非无class属性的元素；:not([class])才匹配无class属性的元素；排除多个类需链式写法:not(.a):not(.b)，不可用:not(.a,.b)。
直接用 :not(.classname) 就能选中所有不包含该类名的元素，但必须清楚它匹配的是「不含这个类」，不是「完全没有 class 属性」——这是最常被误解的一点。
为什么 :not(.active) 会选中
:not() 判断的是元素是否「匹配括号内的选择器」，而不是看它有没有 class 属性。只要元素不带 .active 这个类，哪怕它有 .btn、.primary 甚至多个其他类，都算符合条件。
-
→ 没任何 class，自然不匹配.active→ 被选中 -
→ 有 class，但没active→ 不匹配.active→ 被选中 -
→ 匹配.active→ 被排除
所以它本质是逻辑否定，不是“空值判断”。
想只选「连 class 属性都没有」的元素？用 :not([class])
如果真要区分「无 class 属性」和「有 class 但不含某类」，就得换属性选择器：:not([class]) 才是严格匹配没有 class 属性的元素。
-
文本
class属性 → 匹配 -
空class
class属性（哪怕为空）→ 不匹配 -
有值
注意：[class] 是属性存在选择器，不是值判断；别写成 [class=""]，那只会匹配空字符串值，漏掉带值的情况。
排除多个类，不能写成 :not(.a, .b)
这种写法在 CSS 中是无效语法，浏览器会直接忽略整条规则。正确方式是链式叠加：
div:not(.disabled):not(.hidden) { opacity: 1; }
这表示「既不匹配 .disabled，也不匹配 .hidden」，等价于逻辑与（AND），不是或（OR）。
- ✅
div:not(.a):not(.b)：同时排除两类 - ❌
div:not(.a, .b)：语法错误，CSS 解析失败 - ⚠️
div:not(.a):not(:hover)：合法，但要注意伪类顺序不影响结果，只影响可读性
兼容性和性能上容易被忽略的点
:not() 自 Chrome 4 / Firefox 3.5 / Safari 3.2 起就已支持，IE8 及以下不支持——如果你还要兼容 IE8，得换 JS 或额外 class 控制。
- 权重计算：括号内选择器计入特异性，
div:not(.active)的权重 =div+.active，不是简单按:not算 - 嵌套限制：CSS Level 3 不允许
:not(:not(...))或:not(div p)这类复合选择器；Level 4 开始支持逗号分隔多选器，但主流浏览器落地仍不统一 - 性能无明显瓶颈：现代引擎对
:not()优化良好，但避免在深层嵌套或高频重绘区域滥用复杂链式写法
真正难处理的，是当多个 :not() 和其它高权重规则混用时，调试样式覆盖关系会变得隐晦——建议优先用明确类控制，:not() 仅用于清晰的「默认态 vs 特例」场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
