:not(:has())语法合法但需浏览器支持，chrome 105+、edge 105+、safari 16.4+、firefox 120+才真正生效；旧版浏览器静默忽略，应避免单独使用，推荐.card:not(.card:has(> .error))等带基础选择器的写法。
:not(:has())写法是否合法？浏览器到底认不认
语法上 :not(:has()) 是合法的，但实际生效与否，完全取决于浏览器是否支持 :has() 且允许它出现在 :not() 内部。Chrome 105+、Edge 105+、Safari 16.4+、Firefox 120+ 才真正支持；Safari ≤ 16.3、Firefox ≤ 119 会直接忽略整个选择器——连控制台警告都不会有，样式静默失效。
常见错误现象：section:not(:has(> .error)) 在 Safari 16.3 中完全不生效，但开发者常误以为是选择器写错，反复调试 HTML 结构或 CSS 优先级。
- 用 caniuse.com/css-has 查目标环境支持情况，别靠“我本地 Chrome 能跑”做判断
- 不要把
:not(:has(...))当成通用写法，它本质是「现代 CSS Level 4」特性，不是降级友好型 - 若项目需兼容 Safari 15.x 或旧版 Firefox，必须放弃该组合，改用 JS 或类名标记
真正能稳定工作的组合形式是什么
唯一被所有支持 :has() 的浏览器一致认可的写法，是 :not() 外层包裹一个「完整、可独立存在」的选择器，其中 :has() 作为其一部分出现，例如 .card:not(.card:has(> .error)) —— 注意这里 .card 出现了两次，前一个用于基础匹配，后一个用于和 :has() 组合成复合选择器。
有效示例：
.card:not(.card:has(> .btn-danger)) { opacity: 0.8; }
form[data-status="invalid"]:not(form[data-status="invalid"]:has(input.error)) { border-color: green; }
-
:not()括号里不能只写:has(...)，必须带基础选择器（如类名、标签、属性） -
:has()内部可用>、+、~，但不能嵌套另一个:not()（如:has(:not(.x))不合法） - 避免写
div:not(:has(p))这类“看似简洁”的形式，它在多数旧环境里等于没写
当 :has() 不可用时，怎么模拟“父元素不含某子元素”
CSS 本身无法在不支持 :has() 的环境下声明式地匹配「父元素不含某子元素」。这不是写法问题，是能力缺失——:empty 只能判空，:not(:empty) 只能判非空，但无法区分“含 span”还是“含 img”。
- 服务端或构建时加语义 class：比如渲染时判断
<div class="card"> 是否含 <code>.error，输出<div class="card card--has-error">，再用 <code>.card:not(.card--has-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()匹配的是「包含」，不是「直接子元素」——div:has(span)会匹配<div><p><span></span></p></div>，若需严格限定层级，必须用>显式写出 -
:not()和:has()组合后优先级不变，但可读性骤降，团队协作时建议加注释说明意图，比如/* 排除含 .error 子项的 card，用于禁用交互态 */ - 动态 DOM 场景下（如 React/Vue 组件频繁挂载/卸载），
:has()样式会自动响应，但可能引发意外重绘；关键交互逻辑仍建议交由 JS 控制状态
:has() 性能代价和结构陷阱
:has() 触发的是全局回溯匹配，尤其当写成 :has(*) 或 :has(> *) 时，浏览器要为每个候选父元素检查全部子节点，可能显著拖慢首次渲染或 DOM 变动后的样式计算。
容易被忽略的结构细节：
