:not() 不支持嵌套 :has()，因 css 规范禁止在 :not() 中使用关系选择器或伪类组合；正确做法是用独立选择器覆盖，如先设样式再用 :has() 重置，或结合属性选择器并列使用。
为什么 :not() 里不能直接写 :has()
因为 CSS 规范明确禁止在 :not() 的参数中使用**关系选择器**或**伪类组合**（包括 :has()）。浏览器会直接忽略整个选择器，哪怕它语法看起来“合理”。比如 div:not(:has(> p)) 是无效的，控制台不会报错，但样式根本不会生效——这是最常踩的坑。
:has() 替代 :not():has() 的实际写法
想表达“排除包含某结构的元素”，得把逻辑翻过来：不写“不含 p 的 div”，而写“所有 div，再减去含 p 的 div”——用逗号分隔的两个独立选择器，配合样式覆盖或 display: none 等显式控制。
- 错误写法：
section:not(:has(> .btn)) { color: red; }（被忽略） - 正确思路：
section { color: red; } section:has(> .btn) { color: initial; } - 若需隐藏，优先用
section:has(> .btn) { display: none; }，而非试图在:not()里塞:has()
嵌套排除时用多层 :has() + 类名辅助更可靠
纯伪类组合极易失控。例如“排除有 .Error 子元素、且自身不带 data-allowed 属性的 card”，硬凑会失败。更稳的做法是：
- 给符合条件的元素加临时类，如
card--safe，用 js 或服务端逻辑判断后添加 - 用
.card:not(.card--safe)控制排除，把复杂逻辑移出 CSS - 若坚持纯 CSS，可拆解为：
.card:not([data-allowed]):has(.error) { /* 排除目标 */ }——这里:not()只作用于属性，:has()单独判断结构，二者并列而非嵌套
注意浏览器兼容性与性能代价
:has() 在 chrome 105+、firefox 121+、safari 15.4+ 支持，但旧版 Safari 仍不支持。更重要的是：:has() 会触发**全局回溯匹配**，尤其在 :has(> *) 这类宽泛写法下，可能显著拖慢渲染。生产环境慎用深层嵌套或通配符。
立即学习“前端免费学习笔记（深入）”；
真正复杂的排除逻辑，CSS 不是第一选择。该交给 JS 判断的就别硬塞进选择器里——尤其是要动态响应 dom 变化的时候。