css无法直接选择“无class的元素”，但可用:not([class])匹配未声明class属性的元素，或:not(.a):not(.b)排除已知类名；动态类名需js配合matches()或hasattribute()判断。
用 :not() 配合 :is() 或属性选择器筛掉带类的兄弟
纯 CSS 没有“只选没 class 的元素”这种原生伪类，但你可以用 :not([class]) 判断是否完全没写 class 属性，或者用 :not(.foo):not(.bar) 排除已知类名——后者更常用，也更可控。
注意：:not([class]) 只匹配那些 HTML 标签上**根本没出现 class= 属性**的元素，哪怕写成 class="" 也算有该属性，会被排除。真实项目里几乎没人这么写，所以它基本只对“手写 HTML 时真没加 class”的情况有效。
-
:not(.active):not(.disabled):not(.loading)是更稳妥的做法，前提是你知道哪些类可能出现在兄弟元素上 - 如果类名是动态生成的（比如 React 的哈希类），这条路就走不通，得换思路
- 别用
:not([class*=""])——无效，CSS 不支持空字符串通配
~ 和 + 兄弟选择器本身不区分是否有类，要靠前置条件过滤
很多人以为 div ~ p 能“只选后面没类的 p”，其实不能。这个选择器只管结构关系，不管类。真正起作用的是左边那个“锚点”元素是否带类，以及你有没有在右边再加一层筛选。
例如：section > .trigger + p:not([class]) 表示：找 section 下直接子元素中带 .trigger 类的元素，它后面紧挨着的、且没写 class 属性的 p。
- 把类判断放在右边（如
p:not(.highlight)）比放在左边更直观，也更容易维护 -
~是“后续所有兄弟”，+是“下一个相邻兄弟”，性能差异可忽略，但语义必须对得上逻辑 - 如果锚点元素自己没类（比如
div + p），那所有满足位置关系的p都会命中，毫无过滤效果
JavaScript 补位时，Element.matches() 比正则更可靠
当 CSS 真的搞不定（比如类名动态、需要运行时判断），就得 JS 上。别用 el.className.split(" ").length === 0，空格处理容易翻车；也别用正则去匹配 class=" " 这种边界情况。
直接用 el.matches(":not([class])") 或 !el.hasAttribute("class")，前者和 CSS 逻辑一致，后者最直白。
-
el.classList.length === 0是常见错误：它只检查 DOM 中解析后的类列表长度，但class=""或class=" "会导致classList为空，而元素实际是有class属性的 - 如果必须看“有没有视觉上生效的类”，那就得结合
getComputedStyle()，但那已经超出“有没有类”的原始问题了 - 批量操作时，优先用
querySelectorAll("p:not([class])")，比遍历后matches()更快
伪元素或布局 hack 不解决本质问题，反而增加维护成本
有人试过用 ::before 给带类元素加标记，再用 CSS 去躲开；或者用 display: contents 把带类容器“隐形”，让子元素变成视觉上的兄弟——这些都在绕开问题本身。
它们要么破坏可访问性（display: contents 会让屏幕阅读器丢失结构），要么让样式依赖 DOM 结构细节，一改 HTML 就全崩。
- 如果你发现必须靠这类技巧才能区分兄弟，大概率是 HTML 结构或组件设计出了问题
- 更健康的解法是：让“需要特殊处理的兄弟”自带一个稳定标识，比如统一加
data-plain属性，而不是赌它“没类” - CSS 的能力边界就在这儿：它不关心意图，只响应明确写出的标记。想靠“没有的东西”做样式，迟早踩坑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
