: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><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>→ 匹配（无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 " 等依然匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
