旧浏览器完全忽略:has()，整条css规则被静默丢弃；chrome 105+、firefox 121+、safari 15.4+才原生支持；降级应采用js监听事件+手动切换class，而非依赖polyfill或@supports。
旧浏览器根本不会解析:has()，不是“不生效”，是整条规则被静默丢弃
你写的 form:has(input:invalid) { border: 2px solid red; } 在 IE11、Firefox 120、Safari 15.3 及更早版本里，CSS 引擎压根不认识 :has() 这个语法。它不会报错，也不会尝试降级，而是直接跳过整条规则——包括大括号里的所有声明。DevTools 的 Styles 面板里根本看不到这条规则，容易误以为是选择器写错了。
这意味着：不能靠“写了就有人认”来赌兼容性；也不能指望 @supports selector(:has(*)) 在这些浏览器里兜底——iOS 15.3 及更早连这个 @supports 语法都不支持，整块 CSS 都会被忽略。
- Chrome 105+、Firefox 121+、Safari 15.4+ 是当前唯一能原生可靠运行
:has()的组合 - 低于这些版本的浏览器，
:has()规则等同于不存在，必须用其他方式补上逻辑 - 构建工具（如 cssnano）在压缩时可能直接删掉含
:has()的整条规则，连降级机会都不留
用 JS 主动判断并切换 class，是最可控的降级路径
核心思路是：把 :has() 表达的语义，翻译成 JS 可判定的真实 DOM 状态，然后手动给父元素加类。这不是“模拟”，而是重写语义等效逻辑。
例如：.card:has(input:checked) → 检查 .card 内是否存在已勾选的复选框，并确保父元素有稳定标识（比如 class="card" 或 id="login-form"），避免依赖 div:nth-child(2) 这类脆弱结构。
- 监听精准事件，而非滥用
MutationObserver：表单校验用blur/change，details展开用toggle，复选框用change（不是click） - 判断子元素是否“真实可见”：用
el.querySelector('input').offsetParent !== null，而不是只查是否存在，避免display: none导致误判 - 初渲染时必须手动触发一次：DOM ready 后立即遍历一次目标父元素，否则首屏样式缺失
引入 polyfill-pseudoclass-has 前，先确认它不解决你的问题
这个 polyfill 确实能增强 querySelector、matches 等原生方法，让它们识别 :has()，但它有明确边界：
- 不支持 IE 和 Android 4.4 WebView（已基本退出主流，但某些政企内网仍存在）
- 不改变 CSS 解析行为：你在
<style></style>里写的:has()规则依然会被旧浏览器跳过，polyfill 只管 JS 调用 - 必须搭配基础 class 降级：比如同时写
form.has-error { border-color: red; }，防止 polyfill 加载失败或未执行时样式断裂 - 它不监听 DOM 变化，只在你调用时按需计算——所以仍需你主动绑定事件去触发重判
换句话说，polyfill 不是“开了就自动好”，它只是帮你少写几行 querySelector 判断逻辑，而状态响应、事件绑定、初始同步，全得你自己来。
别碰 @import 和 @supports selector() 做降级
这两者在老旧浏览器中风险极高，且无法形成可靠 fallback 链：
-
@import在 IE9 及更早版本里：前面有任何字符（空格、BOM、注释）都会导致整条语句失效；嵌套@import直接被忽略；遇到第一个不支持的语法（如:has()），后续所有声明全丢 -
@supports selector(:has(*))在 Safari ≤15.3、Firefox ≤120、IE11 中完全不识别，整块规则被跳过，等于没写 - 想用
<link rel="stylesheet">+media隔离现代样式？可以，但别用display: grid这类特性做 media 条件——IE11 不认识，整条 link 被忽略，基础样式也丢了；应改用已广泛支持的特性，比如screen and (min-width: 1px)作为“现代环境”占位符
真正安全的做法，是把基础样式裸写在无条件 <link> 或 <style></style> 里，只用 class 名控制状态，而把 :has() 当作可选增强，不是主干逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
