:not() 不能嵌套 :has() 因 css 规范禁止在 :not() 参数中使用关系选择器或伪类组合，如 :not(:has(> .error)) 属语法非法；正确做法是外提 :has() 后用 :not() 包裹整体选择器。
为什么 :not() 不能直接嵌套 :has()
因为 CSS 规范明确禁止在 :not() 的参数中使用关系选择器或伪类组合（包括 :has()），所以像 :not(:has(> .error)) 这种写法会直接被浏览器忽略——它不是“暂时不支持”，而是语法非法。你看到样式没生效，大概率是这个原因。
真正能用的，是把逻辑“翻转”后外提 :has()，再用 :not() 包裹整个选择器主体。
- ❌ 错误写法：
div:not(:has(> .warning))（解析失败） - ✅ 可行思路：先写出“包含 .warning 的 div”，再用
:not()排除它 - ⚠️ 注意：
:has()目前仅在 Chrome 105+、Safari 15.4+、Firefox 121+ 支持，且不支持在 CSS @keyframes 或某些伪元素中使用
用 :not() + :has() 实现“不含某子元素”的筛选
这是最常见也最稳妥的组合场景：你想选那些“里面没有 .disabled 按钮”的表单组。
不要试图在 :not() 里塞 :has()，而是反过来写：
form:not(:has(button.disabled)) {
opacity: 1;
}
这行代码实际含义是：“所有 form 元素，只要其内部任意后代（含子、孙等）存在一个 class 为 disabled 的 button，就排除掉”。注意 :has() 默认是后代匹配，如果只想要直接子元素，得写成 :has(> button.disabled)。
-
:has(> .icon)：只检查直接子元素，性能略好，语义更精确 -
:has(.icon)：检查所有后代，更宽松但可能意外命中深层嵌套 - 若需“既不含 .error 也不含 .warning”，只能拆成两个
:not()嵌套：div:not(:has(.error)):not(:has(.warning))
模拟“与”“或”逻辑时的边界陷阱
CSS 没有原生的逻辑运算符，:not() 和 :has() 组合本质是靠集合补集和存在性判断来逼近，容易在多条件时出错。
比如想表达“按钮是 primary 类型 且 不在禁用表单内”，不能写成 button.primary:not(form:has(.disabled))——这种跨层级的否定根本无法表达。
- ✅ 正确路径：给禁用表单加个标记类（如
form[aria-disabled="true"]），然后用button.primary:not(form[aria-disabled="true"] *) - ⚠️
:has()无法向上查找父辈，所以“父元素满足某条件”必须靠父元素自己暴露状态（如 class、属性） - ❌ 不要依赖
:has()判断兄弟元素是否存在，它不支持:has(+ .sibling)这类相邻选择器
性能和回退方案必须提前考虑
:has() 是 CSS 中少数会触发“反向查询”的伪类，浏览器需要从每个候选元素出发，向上/向下遍历 DOM 树验证条件，复杂选择器下可能明显拖慢渲染。
如果你的 :has() 里用了宽泛选择器（比如 :has(*) 或 :has([data-*])），或者嵌套多层 :not()，务必在真实数据量下测 FPS。
- 简单回退：对不支持
:has()的旧浏览器，用 JS 补充 class（如form--no-error），CSS 只依赖类名 - 避免滥用：能用
[data-state="valid"]解决的，就别硬上:has(:not(.error)) - 真正难搞的是动态内容——
:has()不监听 DOM 变化，JS 插入新节点后，样式不会自动更新，必须手动触发重排或切换 class
别指望靠几个伪类就覆盖所有逻辑分支；该用 JS 控制状态的地方，就老老实实加 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
