:not([class])只匹配html中完全未声明class属性的元素，如文本；一旦存在class=""、class=" "或class="foo"等任何形式的class属性，即不匹配。

为什么 :not([class]) 选不到你预期的元素

它只匹配那些 HTML 源码里**压根没写 class= 属性**的标签，比如 <p>文本</p>。一旦写了 class=""、class=" " 或 class="foo"，哪怕值为空或只有空格，浏览器就认为该属性存在，:not([class]) 就会跳过——这不是 bug，是 CSS 属性选择器的定义行为。

常见误判场景：

• React/Vue 渲染出的 <div class=""> → 不匹配 <li>服务端模板（如 Django）生成的 <code><span class="{{ css_class }}"></span>，当 css_class 为空时 → 输出 class="" → 不匹配
• 手动清空 class 的 JS 代码：el.className = "" → 属性仍存在 → 不匹配

:not([class]) 的真实适用场景

它适合处理「手写静态 HTML」中明确不加 class 的原始结构，比如文档骨架、语义化容器、或 SSR 初次渲染且严格控制输出的环节。

典型用例：


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 重置所有未被标记的段落字体大小：p:not([class]) { font-size: 1rem; }
• 给纯 <ul><li></ul> 列表加基础间距，跳过组件库封装的列表：ul > li:not([class]) { margin-bottom: 0.5em; }
• 避免样式污染 Markdown 解析结果：h2:not([class]), h3:not([class]) { border-bottom: 1px solid #eee; }

注意：它对 <div> 这类泛用标签要格外谨慎——太多框架/工具会默认注入空 class，实际命中率远低于预期。 <h3>比 <code>:not([class]) 更可靠的替代方案

多数现代项目中，真正需要的是「未被业务逻辑显式标记」的元素，而非「HTML 源码无 class 属性」。这时应换用可主动控制的标记策略：

• 统一加 data 属性：document.querySelectorAll("p").forEach(p => !p.hasAttribute("data-role") && p.setAttribute("data-raw", ""));，再写 p:not([data-role]):not([data-raw]) —— 可控、可追溯
• 用 BEM 约定排除修饰符：.content > *:not([class*="--"]):not([class^="js-"])，靠命名规则过滤，不依赖属性是否存在
• 服务端注入占位类：<p class="raw"></p>，然后用 p:not(.raw) 做反向排除 —— 简单直接，兼容性无死角

这些方法把“判断权”从浏览器解析行为转移到开发者可控的标记上，避免被框架、模板、JS 动态操作意外绕过。

链式 :not() 写法容易忽略的权重陷阱

:not([class]) 自身 specificity 是 10（等同于一个类选择器），但如果你叠加多个 :not()，比如 p:not([class]):not([id]):not([data-test])，它的权重仍是 10，不会累加。这意味着：

• 它会被一条简单的 p.foo { ... }（权重 11）轻松覆盖
• 如果通用重置规则写在组件样式之后，大概率不生效
• 调试时看 computed styles，重点不是“是否匹配”，而是“哪条规则最终胜出”

所以，真要批量重置，优先把 :not([class]) 规则放在 CSS 文件最前面，或用 !important 临时兜底（仅限开发期验证逻辑）；上线前务必换成带明确 scope 的选择器，比如 .reset-root p:not([class])。