css :has()在ie、safari≤15.3、firefox≤120中不被解析，整条规则静默丢弃；@supports selector()不可靠，因ie11不支持该api，safari15.3/firefox120返回false且构建工具可能删规则；须用css.supports('selector(:has(a))')在dom ready后检测，并配合js主动打标还原语义。
CSS :has() 在 IE、Safari ≤15.3、Firefox ≤120 中根本不会被解析，整条规则静默丢弃——不是“不生效”，是浏览器压根不认识这个语法，连 DevTools 里都看不到它被加载。降级不是加个 fallback 就行，得用 JS 主动补上语义等效的状态。
为什么 @supports selector(:has(a)) 不可靠
@supports 检测选择器本身是 W3C 新增能力，但支持极不均衡：Chrome 110+ 才真正可用；IE11 完全不识别该语法，连 @supports 都报错；Safari 15.3 和 Firefox 120 虽能解析该语句，但 CSS.supports('selector(:has(a))') 返回 false，且构建工具（如 cssnano）可能直接删掉整条规则。更糟的是，@supports 是 CSS 规则级开关，无法控制 JS 行为，容易造成样式与逻辑不同步。
- 别在同一个页面里既写
@supports selector(...) { ... }，又用 JS 注入降级样式——加载顺序不确定，现代浏览器可能先执行 JS 再加载 CSS，导致 class 被覆盖 - 真要检测，必须用
CSS.supports('selector(:has(a))')，且只在 DOM ready 后执行（否则document.createElement创建的测试元素未挂载，判断失准） - IE11 下
CSS.supports本身不存在，需先做存在性判断：if (CSS?.supports)，否则直接走降级路径
用 JS 替代 :has() 的关键实操点
JS 不是“翻译”选择器，而是还原其表达的 DOM 状态逻辑，并手动打标。核心是：找对父元素、选准触发事件、避开脆弱判定。
- 父元素必须有稳定标识：
class="form-group"或id="login-form"可靠；div:nth-child(2)这类结构依赖型选择器一改就断 - 别用
MutationObserver监听整个document.body——开销大、易误触发、清理麻烦；优先监听具体事件：input用blur/change，details用toggle，复选框用change（不用click） - 判定逻辑要防干扰：
div:has(.error)对应el.querySelector('.error')?.offsetParent !== null，而非单纯!!el.querySelector('.error')（避免display: none元素误判） - 复合条件要显式限定：
.card:has(input:checked)应写成el.querySelector('input[type="checkbox"]:checked')，防止匹配到其他类型 input
如何组织降级样式和 JS 逻辑不打架
样式和 JS 必须协同，不能靠“谁后加载谁赢”。旧浏览器里，CSS 规则失效了，JS 就是唯一可信入口；现代浏览器里，:has() 原生高效，JS 只作兜底或增强。
- 基础样式无条件加载：
<link href="base.css" rel="stylesheet">，里面只用 class/id/属性选择器，不碰:has、var()、grid - 增强样式隔离加载：
<link href="enhance.css" rel="stylesheet" media="screen and (display: grid)">——IE11 不认识display: grid这个媒体特性，整条<link>被忽略，不会加载含:has()的文件 - JS 注入的 class 必须与 CSS 规则一一对应，且命名清晰：
.form-group.has-error对应.form-group:has(.input-error)，避免歧义 - 不要在单个组件里混用两种方案：比如一个表单组，既写
.group:has(.invalid)，又用 JS 动态加has-invalid类——现代浏览器里原生:has会抢跑，JS 类可能被 CSS 规则覆盖掉
最易被忽略的是：JS 判定逻辑必须和 :has() 的语义完全对齐，而不是“差不多就行”。比如 form:has(input:invalid) 要遍历所有 input 并调用 checkValidity()，而不是只查 :invalid 伪类——因为旧浏览器连伪类都不支持，你得自己模拟校验行为。这一步漏掉，降级就只是表面功夫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
