真正能落地的降级方案只有三类：正向标记、服务端/构建时注入类名、轻量JS补位；Firefox至今不支持:not(:has())，整条规则被静默丢弃，Safari存在偶发忽略，工具链可能提前剥离，导致上线失效。
别用 :not(:has()) 做降级，Firefox 直到 2026 年 7 月最新稳定版仍完全不识别，整条规则被静默丢弃；真正能落地的方案只有三类：正向标记、服务端/构建时注入类名、轻量 JS 补位（带 CSS.supports 检测）。
为什么 :not(:has(.foo)) 不是可靠降级路径
这个写法语法合法，但浏览器支持极不一致：
- Firefox 完全不解析
:not(:has())组合，DevTools Styles 面板里根本看不到它 - Safari 15.4–16.3 对
:not(:has())有偶发忽略，行为不可控 - PostCSS 或
@ant-design/cssinjs等工具可能在打包时提前剥离不认识的选择器，导致本地开发正常、上线后失效
你写的不是“降级”，而是“在部分浏览器里彻底消失”。
用正向标记代替否定逻辑
把「不含 .delete-btn 的卡片」这种否定需求，转成「含 .delete-btn 的卡片需降权」这种肯定表达：
立即学习“前端免费学习笔记（深入）”；
-
.card默认状态定义完整样式（比如opacity: 1、padding: 1rem） -
.card:has(.delete-btn)只覆盖需要调整的部分（比如opacity: 0.6） - 这样即使浏览器不支持
:has()，用户看到的也只是默认态，不会错乱
避免使用 :not(:has(.foo)) 或 :has(:not(.foo))——后者语义完全不同，且性能风险高。
服务端或构建时注入特征类名
适用于 SSR、静态站点或构建流程可控的项目：
- 服务端渲染时判断容器是否含目标子元素，输出
<div class="card card--no-actions"> - 构建脚本（如 Vite 插件）扫描 HTML 模板，自动补全类名
- CSS 写成
.card--no-actions { }，零兼容性问题 - 比纯客户端 JS 更早生效，避免 FOUC 或布局抖动
轻量 JS 补位只运行一次
当必须动态判断且无法预知结构时，JS 补位是最务实的选择——但得控制粒度：
- 只对关键容器（比如首屏可见的
.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在 IE11 中不存在
真正难的不是写几行 JS 或 SCSS，而是确定哪些交互必须靠 JS 补全、哪些可以靠结构约束规避——比如把“有 badge 才显示箭头”改成“所有 card 默认显示箭头，但 badge 存在时才激活 hover 效果”，有时比模拟 :has() 更轻量。
