旧浏览器静默跳过 :where()、:has() 等新选择器，整条规则被丢弃；@supports 无法检测选择器支持性，须用 js 运行时判断 css.supports()；降级需保证选择器权重一致且置于现代样式之后。
旧浏览器直接忽略 :where()、:has() 等新选择器，不报错也不生效
Chrome 105+ 才开始支持 :where()，Safari 15.4+ 支持 :has()，而 IE 和 Safari ≤14 完全不认识这些语法。关键点在于：它们不是“渲染错误”，而是**静默跳过整条规则**——包括后面所有声明。比如：
.btn:where(.primary) { color: blue; }在 IE11 里，整个规则块被丢弃，.btn 样式完全不生效。
常见错误是以为加个 fallback 就行，比如写成：
.btn { color: #333; }<br>.btn:where(.primary) { color: blue; }结果 IE11 只渲染第一行，但现代浏览器因 specificity 相同，:where() 规则可能被覆盖或权重失效。
- 永远不要把新选择器和旧选择器混在同一选择器链里（如
.list:has(> li)）——旧浏览器直接抛弃整行 - 避免用
:where()包裹高权重选择器（如:where(#app) .modal），它虽降低 specificity，但旧浏览器根本解析不了，等于没写 - 若用 CSS-in-JS（如
@ant-design/cssinjs），关闭:where封装：设置<styleprovider hashpriority="high"></styleprovider>，让输出为普通类名
@supports 检测对选择器无效，必须用 JS 运行时判断
@supports 只能检测属性和值（如 @supports (display: grid)），**不能检测选择器是否被支持**。写 @supports selector(:has(a)) 在 Chrome 110+ 才有效，IE、Safari ≤15.3、Firefox ≤108 都不识别该语法，连兜底逻辑都进不去。
真正可行的方式是运行时 JS 检测：
const supportsHas = CSS.supports('selector(:has(a))');然后动态插入对应样式块。但注意：
- IE11 不支持
CSS.supports()，需先判断是否存在该 API，不存在就直接走降级路径 - 检测必须在 DOM ready 后执行，否则
document.createElement创建的测试元素可能未挂载，导致误判 - 不要在单个组件里既用
@supports写 CSS 规则，又用 JS 注入降级样式——加载顺序不确定，容易覆盖
降级方案不是“翻译”，而是重写语义等效的选择器
没有工具能自动把 :has(.active) 转成兼容写法。它表达的是“父容器内有 active 子项时样式生效”，而旧浏览器只能靠 JS 添加 class 或改用结构限制实现。
典型处理方式：
- 用 JS 监听子节点变化，手动给父元素加
has-active类，再写.parent.has-active { … } - 在构建时静态预判：如果业务逻辑中只有特定位置会插入
.active，就直接用相邻兄弟选择器（.item + .item.active）或层级固定的选择器（.list > .item.active）替代 - 放弃动态语义，改用状态驱动：把
:has(.loading)降级为组件级 class 切换，如<div class="card card-loading"> → <code>.card-loading { … } - 慎用
:is()降级：它比:where()兼容稍好（Chrome 103+/Safari 15.2+），但仍不支持 IE；若必须用，确保 fallback 是独立可运行的选择器，而非嵌套依赖 - 都用单类名：
.card和.card-has-image（而不是.card .has-image） - 避免混用 ID 和 class：
#main .list:has(li)降级不能只写.list-has-item，得保持 ID 层级：#main .list-has-item - 使用
!important是最后手段——它破坏可维护性，且在 CSS-in-JS 场景下可能被注入顺序覆盖
权重一致是降级生效的前提，不是锦上添花
现代样式用 .container:has(> .header)，降级写成 .container-header-ready，但如果前者 specificity 是 0-1-1，后者是 0-1-0，旧浏览器就会被更高权重的其他规则覆盖。
必须保证两者选择器权重相同：
最易被忽略的是：降级样式必须放在现代样式之后（CSS 文件顺序），否则即使权重一致，也会被前面的规则覆盖；JS 动态注入时，要确保 style 标签插入到 head 最后，或使用 insertAdjacentElement('beforeend', style) 控制位置。
