:not(.classname)匹配不含该类的元素，而非无class属性的元素；:not([class])才匹配无class属性的元素；排除多个类需链式写法:not(.a):not(.b)，不可用:not(.a,.b)。
:not(.classname) 能直接选中所有不带该类的元素，但它不是“没有 class 属性”的判断——这是最常误用的点。
为什么 :not(.active) 会选中 <button></button> 和 <button class="btn"></button>
:not() 做的是逻辑否定：只要元素不匹配括号里的选择器，就入选。它不关心有没有 class 属性，只看是否“有 .active 这个类”。
-
<button></button>→ 没任何类 → 不匹配.active→ ✅ 被选中 -
<button class="btn"></button>→ 有类，但没active→ 不匹配.active→ ✅ 被选中 -
<button class="btn active"></button>→ 匹配.active→ ❌ 被排除
换句话说，它等价于「非 active」，不是「空 class」。
想选真正没有 class 属性的元素？用 :not([class])
只有 :not([class]) 才严格匹配那些压根没写 class 属性的标签。
立即学习“前端免费学习笔记（深入）”；
-
<p>文本</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>→ 无class属性 → ✅ 匹配 -
<p class="">空class</p>→ 有class属性（哪怕为空）→ ❌ 不匹配 -
<p class="text">有值</p>→ 同样 ❌ 不匹配
注意：[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 属性」，或是「某个结构位置」——这三个意图对应完全不同的选择器写法。
