:not([class]) 是唯一正确匹配未声明 class 属性元素的选择器，它基于属性存在性判断，而非值是否为空；其他如 :not([class=""]) 或 :not(.xxx) 均无法准确实现该目标。
直接用 :not([class]) 选中无 class 的元素
想匹配那些压根没写 class 属性的元素（不是 class=""，也不是 class=" "），最稳妥的方式是检查属性是否存在，而不是检查值是否为空。:not([class]) 就是干这个的——它只排除带 class 属性的元素，不管这个属性有没有值、值是不是空字符串。
常见误区是用 :not([class=""]) ，这只能排除显式写了空值的元素，对 <div> 或 <code><p></p> 这类完全没声明 class 的标签无效。
-
:not([class])✅ 匹配<div>hello</div> -
:not([class=""])❌ 不匹配上面那个<div>，因为属性根本不存在<li> <code>[class=""]只匹配<div class="">，这种写法本身也极少见<h3> <code>:not(.some-class)不能替代「无 class」判断很多人误以为写成
:not(.foo):not(.bar):not(.baz)就能筛出“没 class”的元素，这是错的。只要元素带了任意 class（哪怕叫qux），它就会被漏掉；更糟的是，如果一个元素同时有foo和qux，它仍会被:not(.foo)排除，但其实它明显是有 class 的。本质区别在于：
:not([class])是“属性存在性判断”，而:not(.xxx)是“类名匹配判断”。后者永远无法穷举所有可能的 class 名，也不解决“没写 class 属性”这个原始需求。立即学习“前端免费学习笔记（深入）”；
- 目标是「没写
class属性」→ 用:not([class]) - 目标是「不包含某个特定 class」→ 用
:not(.xxx) - 目标是「既没 class 属性，又不是某标签」→ 可组合，如
div:not([class])
注意兼容性和 HTML 解析细节
:not([class])在所有现代浏览器（包括 IE9+）都支持，没问题。但要注意 HTML 解析行为：服务端模板或前端框架有时会自动注入空class属性（比如 Vue 的v-bind:class="{}"可能渲染成class=""），这时元素就不再匹配:not([class])了。如果遇到“明明没写 class 却没被选中”，建议打开开发者工具，右键「Edit as HTML」看真实 DOM 中是否存在
class=""或其他空格/换行导致的隐式 class 声明。- 用
getBoundingClientRect()或getComputedStyle()验证样式是否真正生效 - 避免在动态渲染场景下依赖
:not([class])做关键布局逻辑，优先用明确 class 控制 - 若需兼容极老环境（IE8-），只能靠 JS 判断
el.hasAttribute('class')后加 class 控制
/* 示例：仅给没有 class 属性的 p 元素加边框 */ p:not([class]) { border: 1px solid #ccc; } <p>/<em> 错误示例：下面这行不会命中 <p>test</p> </em>/ p:not([class=""]) { color: red; }CSS 里「无 class」是个看似简单、实则容易被属性存在性与值内容混淆的问题。真正关键的不是“有没有值”，而是“有没有这个属性声明”。
:not([class])是唯一符合语义的解法，其余都是绕弯或不可靠的推测。 - 目标是「没写
