:not(:has(...))会静默失效，因CSS规范禁止在:not()中使用关系选择器或伪类组合，:has()正属被禁类型；浏览器直接忽略整条规则，DevTools标“Invalid CSS”。
为什么 :not(:has(...)) 会静默失效
浏览器直接忽略整条规则，不是“没效果”，而是压根不解析——CSS 规范明确禁止在 :not() 括号内使用关系选择器或伪类组合，:has() 正属于被禁用的伪类。哪怕你写成 div:not(:has(> p))，DevTools 里整行 CSS 会被划掉并标 “Invalid CSS”，且无任何错误提示。这是最常踩的坑，也是所有后续问题的根源。
正确替代方案：层叠覆盖 + 显式重置
想表达“所有 section，但排除内部有 .btn 的”，不能靠否定逻辑硬塞进一个选择器，而要拆成两步：
-
section { color: red; }—— 先设默认样式 -
section:has(> .btn) { color: initial; }—— 再用:has()精准定位需排除的父元素，显式重置
若需隐藏而非仅重置样式，优先用 section:has(> .btn) { display: none; }，避免依赖 color 或 visibility 等易被其他规则覆盖的属性。
多条件排除时别硬套:not()链
例如“排除自身带 [data-allowed] 且子元素含 .error 的 .card”，不要写 .card:not([data-allowed]):not(:has(.error))（语义错、逻辑反）。应拆解为：
-
.card:not([data-allowed]):has(.error) { /* 排除目标 */ }——:not()只管属性，:has()单独管结构，二者并列而非嵌套 - 更稳做法：服务端或 JS 统一加临时类如
.card--excluded，再用.card:not(.card--excluded)控制，把判断逻辑移出 CSS
注意：:has() 在 Safari 15.4+、Chrome 105+、Firefox 121+ 支持，但旧版 Safari 仍不支持；且 :has(> *) 这类宽泛写法会触发全局回溯，拖慢渲染。
真正复杂的排他逻辑，CSS 不是首选
当排除条件涉及 DOM 动态变化（比如子元素增删、状态切换）、或需结合 JS 数据判断时，:has() 和 :not() 都无法响应。此时该用 JS 判断后加类，或用 IntersectionObserver / MutationObserver 监听变化。CSS 的优势在于静态结构匹配，一旦逻辑变“活”，就该交棒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
