Firefox 121前不支持:has()，调用querySelectorAll(':has()')会抛DOMException；可靠降级方案只有三类：正向标记（如.card:has(.delete-btn)）、服务端/构建时注入类名、轻量JS补位（一次遍历+classList切换）。
Firefox 121 之前不支持 :has()，不是“不生效”，而是解析器直接报错或静默丢弃整条规则；降级不能靠 :not(:has())，得用正向标记、服务端注入类名或轻量 JS 补位。
Firefox 120 及更早调用 querySelectorAll(':has(.btn)') 报 DOMException 怎么办
这不是代码写错了，是 Firefox 直到 121 版本才默认启用 :has() 的 DOM 查询能力。低于该版本（包括当前多数用户仍在用的稳定版）会直接抛出 DOMException: "is not a valid selector"。
- 别用
try/catch包裹后手动遍历 +.matches()降级——兄弟关系、嵌套层级、动态插入节点都会导致逻辑漏判，性能也远低于原生查询 - 必须引入
polyfill-pseudoclass-has：它只增强原生querySelector/querySelectorAll方法，不改业务代码 - 引入时机很关键：必须在 DOM 加载前引入（
或开头），并在window.onload后调用window['polyfill-pseudoclass-has'].addToBrowser()
:not(:has(.delete-btn)) 在 Firefox 里静默失效，为什么不能当降级方案
这个写法语法合法，但 Firefox 直至当前最新稳定版（2026 年 7 月）仍完全不识别 :not(:has()) 组合，整条 CSS 规则被静默丢弃，DevTools Styles 面板里根本看不到它。
- Safari 15.4–16.3 虽支持基础
:has()，但对:not(:has())有偶发忽略，不可依赖 - 构建工具（如 PostCSS、styled-components v5）可能在打包时提前剥离不认识的选择器，导致本地开发正常、上线后样式消失
-
CSS.supports('selector(:not(:has(*)))')在旧版 Chromium 中可能返回true却不执行，检测不可靠
真正可落地的三个降级路径
绕过 :not(:has()) 的兼容短板，选其中一种即可，不要混用：
立即学习“前端免费学习笔记（深入）”；
-
正向标记：把「不含 .delete-btn 的卡片」转成「含 .delete-btn 的卡片需降权」。
.card定义默认样式，.card:has(.delete-btn)只覆盖需要调整的部分。即使浏览器不支持:has()，用户看到的也只是默认态，不会错乱 -
服务端或构建时注入类名：例如服务端渲染时输出
<div class="card card--no-actions">，CSS 写成 <code>.card--no-actions { }。零兼容性问题，比客户端 JS 更早生效，避免 FOUC -
轻量 JS 补位：只对关键容器（比如首屏可见的
.card）运行一次判断：document.querySelectorAll('.card').forEach(el => el.classList.toggle('no-actions', !el.querySelector('.delete-btn')))。不用MutationObserver，也不轮询
最容易被忽略的是：哪怕你用了 polyfill，:has(p a) 这类深层后代匹配在 Safari 和低端设备上仍会触发显著重排，布局抖动比样式没生效更难排查。
