:not()仅接受简单选择器，而:has()是复合选择器，故:not(:has(...))虽语法合法但旧版浏览器不支持；唯一稳定写法是:not(.cls:has(> .sub))，需基础选择器+:has()组合。
为什么 :not(:has(...)) 不能直接写成连写形式
浏览器解析 CSS 选择器时，:not() 只接受「简单选择器」（如 .cls、[attr]、:hover），而 :has() 是一个关系型伪类，属于「复合选择器」，所以 :not(:has(...)) 在当前规范下是合法的，但很多旧版或部分浏览器（如 Safari ≤ 16.4、Firefox ≤ 119）根本不支持 :has()，更不会识别嵌套在 :not() 里的它——直接写会静默失效或报解析错误。
实操建议：
- 先确认目标环境是否支持
:has()（可用 caniuse 查） - 不要写
div:not(:has(> .error))这类看似合理但实际在 Safari 16.3 中完全不生效的规则 - 若需兼容，改用 JS 动态加 class 或拆解为两步：先选中含目标子元素的父级，再用 JS 排除
:not() 和 :has() 组合的真实可行写法
目前唯一稳定可用的组合方式是「外层 :not() 包裹整个带 :has() 的选择器」，即：:not(.foo:has(> .bar)) —— 注意 :not() 的参数必须是一个完整、可独立存在的选择器，且 :has() 必须作为其一部分出现，不能反过来。
常见有效示例：
/* 选中不含 .btn-danger 子元素的 .card */<br>.card:not(:has(> .btn-danger)) { opacity: 0.8; }<br><br>/* 排除有 data-status="invalid" 且含 input.error 的 form */<br>form[data-status="invalid"]:not(:has(input.error)) { border-color: green; }关键点：
-
:has()内部支持>、+、~等组合器，但不能用:not()嵌套在:has()里（如:has(:not(.x))不合法） -
:not()的括号内不能只写:has(...)，必须带上基础选择器（比如.card或div），否则语法错误 - Chrome 105+、Edge 105+、Safari 16.4+ 支持；Firefox 120+ 开始支持，此前版本需降级
替代方案：当 :has() 不可用时如何模拟排除逻辑
纯 CSS 无法在不支持 :has() 的环境下实现「父元素不含某子元素」的声明式匹配，必须引入 JS 或调整 HTML 结构。
推荐做法：
- 服务端或构建时给容器加语义 class，例如
<div class="card card--no-error">，再用 <code>.card:not(.card--no-error)控制样式 - 用 JS 批量检测并标记：
document.querySelectorAll('.card').forEach(el => { if (!el.querySelector('.error')) el.classList.add('no-error'); })，然后写.card:not(.no-error) - 避免依赖「不存在」做样式分支；优先用「存在即覆盖」策略，例如默认设
.card { border: 1px solid #ccc; }，再用.card:has(> .error) { border-color: red; }覆盖 - 尽量限制
:has()的查找范围，用>替代空格，用具体标签名替代* -
:not(:has(...))不会跳过已匹配的元素再反向过滤——它只是「不匹配那些满足 :has 条件的元素」，逻辑上仍是正向筛选 - 若父元素本身是动态插入的（如通过
innerHTML），需确保插入后触发样式重算，某些情况下需强制el.offsetHeight触发
性能与作用域边界容易被忽略
:has() 触发的是「向上查找」，浏览器需要对每个候选元素检查其后代/兄弟，复杂 DOM 下可能造成布局抖动。尤其当写成 :has(* .deep-nested) 或 :has(~ *) 时，开销陡增。
注意事项：
