结论：别用 :not(:has(...)) 做降级，firefox 完全不支持；可靠方案只有三类——正向标记（如 .card:has(.delete-btn)）、服务端/构建时注入类名、轻量 js 补位（带 css.supports 检测）。
直接说结论：别写 :not(:has(...)) 做降级，它在 Firefox 里根本无效；真正能落地的兼容性方案只有三类——正向标记、服务端注入类名、轻量 JS 补位。
为什么 :not(:has(.foo)) 不是可靠降级路径
这个写法语法合法，但浏览器支持极不一致：Firefox 直到当前最新稳定版（2026 年 7 月）仍完全不识别 :not(:has()) 组合，整条 CSS 规则被静默丢弃，DevTools Styles 面板里根本看不到它；Safari 15.4–16.3 虽支持基础 :has()，但对 :not(:has()) 有偶发忽略。你写的不是“降级”，而是“在部分浏览器里彻底消失”。
更隐蔽的风险来自构建工具：PostCSS 或 styled-components v5 等库可能在打包时提前剥离不认识的选择器，导致本地开发正常、上线后失效。
用 :has() 正向标记代替否定逻辑
把「不含 .delete-btn 的卡片」这种否定需求，转成「含 .delete-btn 的卡片需降权」这种肯定表达，样式更可控、兼容性更好。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
.card默认状态定义完整样式（比如opacity: 1、padding: 1rem） -
.card:has(.delete-btn)只覆盖需要调整的部分（比如opacity: 0.6） - 这样即使浏览器不支持
:has()，用户看到的也只是默认态，不会错乱 - 避免使用
:not(:has(.foo))或:has(:not(.foo))—— 后者语义完全不同，且性能风险高
服务端或构建时注入特征类名
适用于 SSR、静态站点或构建流程可控的项目。核心思路是：把运行时判断提前到生成 HTML 阶段。
- 服务端渲染时判断容器是否含目标子元素，输出
<div class="card card--no-actions"> <li>构建脚本（如 Vite 插件或 Webpack loader）扫描 HTML 模板，自动补全类名</li> <li>CSS 写成 <code>.card--no-actions { ... }，零兼容性问题 - 比纯客户端 JS 更早生效，避免 FOUC 或布局抖动
- 只对关键容器（比如首屏可见的
.card）批量运行一次querySelectorAll+matches判断 - 不用
MutationObserver监听变化，除非业务真需要实时响应子元素增删 - 示例：
document.querySelectorAll('.card').forEach(el => { if (!el.matches(':has(.btn)')) el.classList.add('card--no-actions'); }); - 注意：Firefox 121+ 已原生支持
:has()，所以这段 JS 可加if (!CSS.supports('selector(:has(*))')) { ... }包裹，但别依赖CSS.supports做样式开关——它在旧 Chromium 中有假阳性
轻量 JS 补位只运行一次
当必须动态判断且无法预知结构时，JS 补位是最务实的选择——但得控制粒度。
最易被忽略的是：哪怕浏览器支持 :has()，在图片懒加载、innerHTML 动态插入等场景下，它仍可能因重绘时机引发布局抖动，尤其在 Safari 和低端设备上。别只测静态 DOM，得在真实交互流里验证。
