Firefox 121 版本前不支持 :has()，需引入 polyfill-pseudoclass-has 并在 DOM 加载前引入、onload 后调用 addToBrowser；:not(:has(...)) 在 Safari/Firefox 中静默失效，应改用正向标记或轻量 JS 补位。
Firefox 中 document.querySelectorAll(':has(...)') 报 DOMException 怎么办
这不是语法错误，而是 Firefox 直到 121 版本才默认启用 :has() 的 DOM 查询能力；低于该版本（包括当前稳定版 128 之前的多数用户）调用 querySelectorAll('div:has(.btn)') 会直接抛出 DOMException: "is not a valid selector"。别用 try/catch 包裹后手动遍历 + .matches() 降级——兄弟关系、嵌套层级、动态插入节点都会导致逻辑漏判，且性能远低于原生查询。
推荐方案是引入 polyfill-pseudoclass-has：
- 它只增强原生
querySelector/querySelectorAll方法，不改业务代码 - 已在大量生产站点验证，对
:has(+ .sibling)、:has(~ .next)等复杂写法支持良好 - 必须在 DOM 加载前引入（
<head>或<body>开头），并在window.onload后调用window['polyfill-pseudoclass-has'].addToBrowser()
:not(:has(...)) 在 Safari 和 Firefox 中静默失效
:not(:has(.delete-btn)) 这类写法语法合法，但 Safari 15.4–16.3 有偶发忽略，Firefox 直至 128 仍不支持——整条 CSS 规则会被浏览器静默丢弃，DevTools 里看不到匹配，控制台也不报错。你无法靠 CSS.supports('selector(:not(:has(*)))') 检测，因为旧版 Chromium 可能返回 true 却不执行样式（假阳性）。
真正可落地的替代路径有三个：
立即学习“前端免费学习笔记（深入）”；
- 正向标记：写
.card { opacity: 1; } .card:has(.delete-btn) { opacity: 0.6; }，默认态 + 例外态，逻辑更可控 - 服务端或构建时注入类名，如
<div class="card card--no-actions">，再用纯 class 选择器 - 轻量 JS 补位：仅对关键容器运行一次判断（例如
document.querySelectorAll('.card').forEach(el => el.classList.toggle('no-actions', !el.querySelector('.delete-btn')))），不监听、不轮询
W3C 验证器报 CSS: Parse Error: ) 但浏览器正常？
nu validator 当前词法分析器未同步 CSS 规范更新，会把 body:has(.modal) 误判为语法错误。这不是你的代码问题，加个空格就能过验证：
- ✅ 改成
body:has( .modal)（括号后加空格） - ✅ 或显式用组合器：
body:has(>.modal)，语义更明确，也通过验证 - ⚠️ 注意：
:has( .modal)和:has(.modal)对浏览器完全等价，空格仅用于骗过验证器 - ❌ 不要因此删掉
:has()或回退到 JS——Chrome 105+、Safari 16.4+、Firefox 121+ 已稳定支持，现代浏览器原生能力足够可靠
IE11 和 Android WebView
这些环境完全不支持 :has()，且无 polyfill 能覆盖 DOM 查询与样式渲染双通道。任何尝试用 JS 模拟 :has() 行为的方案（比如监听 DOMSubtreeModified）都存在性能抖动、竞态和兼容性黑洞。
唯一稳妥路径是放弃“用 CSS 表达条件逻辑”的执念，改用 class 显式控制：
- 把
article:has(> .warning)拆成 JS 判断 + class 注入：el.classList.toggle('has-warning', el.querySelector('> .warning') !== null) - 所有
:is()、:where()必须展开为逗号分隔的选择器，否则 IE11 整条规则静默丢弃 -
@supports在 IE11 中完全不识别，不能当作兼容开关使用
最易被忽略的是：动态场景（如图片懒加载后插入节点、SPA 路由切换）下，:has() 可能触发 Safari 和低端设备上的布局抖动。别只测静态快照，得在真实交互流中观察重排表现。
