:not(.class)匹配不含该类名的元素，无论是否有其他类或空class；:not([class])才匹配完全未声明class属性的元素；排除多个类须链式书写:not(.a):not(.b)，不可用逗号。
:not(.class) 就能选中所有不包含指定类名的元素，但要注意它匹配的是“不含该类”，不是“完全没 class 属性”——这是最常混淆的点。
为什么 :not(.active) 不等于 “没写 class”
:not(.active) 的判断逻辑是：只要元素的 class 属性值里不包含 active 这个 token，就匹配。哪怕它有 class="btn primary" 或 class=""，照样生效。
-
<button>普通按钮</button>→ 匹配（没 class 属性） -
<button class="btn">按钮</button>→ 匹配（有 class，但不含active） -
<button class="btn active">按钮</button>→ 不匹配（含active） -
<button class="">空 class</button>→ 匹配（class=""不等于class="active"）
所以它本质是「类名集合是否包含某项」，不是「属性是否存在」。
:not([class]) 才是真·没 class 属性
如果目标是筛选出连 class 属性都没声明的元素（比如 <p>文本</p>），必须用属性不存在选择器：:not([class])。
立即学习“前端免费学习笔记（深入）”；
-
<p>纯标签</p>→ 匹配（无class属性） -
<p class="">空字符串</p>→ 不匹配（class属性存在） -
<p class="text">有值</p>→ 不匹配（同上）
框架（如 Vue/React）在渲染时可能自动注入 class=""，导致原本匹配 :not([class]) 的元素突然失效——这点容易被忽略。
排除多个类名必须链式写 :not(.a):not(.b)
CSS 不支持 :not(.a, .b) 这种逗号写法，语法直接报错。
- ✅ 正确：
div:not(.disabled):not(.hidden)（既不含disabled，也不含hidden） - ❌ 错误：
div:not(.disabled, .hidden)（无效语法） - ⚠️ 注意：
:not(.a):not(.b)和:not(.a.b)完全不同——后者是“不含同时带 a 和 b 两个类”的元素，极少用到
链式写法等价于逻辑“与”，不是“或”；想表达“不含 a 或不含 b”，本身就不符合常见需求，通常应重新梳理语义。
和 [class]、[class=""] 的区别必须分清
这三个选择器行为完全不同：
-
[class]→ 只要写了class属性（无论值为何）就匹配，包括class="" -
[class=""]→ 仅匹配显式写成class=""的元素，对class="btn"或没写class的都不生效 -
:not([class])→ 仅匹配压根没声明class属性的元素
误把 :not([class=""]) 当作「排除空 class」是常见错误，它实际只排除了 class=""，对 class=" "（带空格）、class=" active " 等依然匹配。
