CSS禁止:not()嵌套:has()，因规范限制关系选择器；应拆分为默认样式+单独:has()覆盖，或用属性与:has()并列组合，复杂逻辑需JS介入。
为什么不能直接写 :not(:has(...))
浏览器会静默忽略整条规则，不是报错，而是根本不起作用。CSS 规范禁止在 :not() 中使用关系选择器或伪类组合，:has() 正属于被禁用的伪类之一。哪怕你写的是 div:not(:has(> button))，Chrome 105+ 和 Safari 15.4+ 虽然支持 :has()，但依然不认可这种嵌套结构——它被当作无效选择器丢弃。Firefox 更是直到 2026 年 5 月最新版仍完全不解析 :not(:has())，连尝试都不做。
:not() 和 :has() 必须「并列」而非「嵌套」
真正能落地的写法是把逻辑拆开：先设默认样式，再用 :has() 单独覆盖例外情况。这不是妥协，而是符合 CSS 层叠本质的做法。
-
p { color: #333; }→ 所有段落默认深色 -
p:has(> a) { color: #666; }→ 含链接的段落变浅色（相当于“排除”） - 想隐藏含
.error的卡片？写.card:has(.error) { display: none; }，而不是试图塞进:not() - 若需保留占位但降权，可用
opacity: 0.4或pointer-events: none替代移除
多条件排除时，别硬凑 :not(:has())，改用属性 + :has() 并列
例如要排除“自身没 data-allowed 属性且子元素含 .error”的卡片，下面这种写法是错的：.card:not([data-allowed]):not(:has(.error)) —— 因为 :not(:has(.error)) 在 Firefox 里无效，且语义是“不含 .error”，和目标逻辑相反。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
.card:not([data-allowed]):has(.error)直接命中要排除的目标 - 然后给它加
display: none或其他抑制样式 - 这样
:not()只管属性，:has()只管结构，二者互不干扰，兼容性也好 - 如果条件更多（比如还要检查是否含
img），就继续追加:has(img)，不要试图合并进一个:not()
真正复杂的逻辑，CSS 不该扛
:has() 在 :has(> *) 或 :has(:not(.foo)) 这类宽泛写法下会触发全局回溯匹配，页面节点一多，渲染就明显变慢。Safari 15.4+ 支持，但旧版 Safari（如 15.2）和部分安卓 WebView 仍不支持。更关键的是：DOM 动态增删子元素时，:has() 不会自动重算（除非整个父元素重绘），而 JS 可以监听 MutationObserver 精准响应。
所以当看到需求里出现“排除含 A 且不含 B 但允许 C”的嵌套条件，或者需要响应 innerHTML 变化时，就该收手——用轻量 JS 添加/移除 class，把判断逻辑交给更可控的环境。CSS 的职责是呈现，不是决策。
