Chrome 89 之前和 Safari 15.4 之前不支持 :has()，因其依赖渲染引擎对 CSS Selectors Level 4 的原生解析，未实现则整条规则被忽略，无法进入样式计算流程，且 @supports selector() 在旧浏览器中不可靠，故无法安全降级。
为什么 :has() 在 Chrome 89 之前和所有 Safari 版本（截至 Safari 15.4）里完全不生效
:has() 是原生 CSS 关系选择器，依赖浏览器渲染引擎对选择器语法的解析支持。旧版 Blink（Chrome a:has(> img) { color: red; }，在 Safari 15.3 下等于没写。
它不像 flex 或 grid 那样有降级 fallback；:has() 规则一旦不被识别，连里面的声明都不会进入样式计算流程。所以不能靠 @supports 检测后渐进增强——@supports selector(:has(*)) 在不支持的浏览器里也返回 false，但你没法用它“补上 JS 行为”，因为检测本身不可靠（部分旧浏览器甚至不支持 @supports selector()）。
用 Element.matches() + classList.toggle() 模拟 :has 的核心逻辑
关键不是“复刻 CSS”，而是抓住你真正想响应的 DOM 结构变化：比如“当某个 div 内部存在 .error 子元素时，给它加 has-error 类”。JS 只需监听结构变更并同步类名，CSS 则用标准类选择器替代。
- 优先用
MutationObserver监听目标容器的子节点增删，比轮询或事件委托更精准、低开销 - 对每个变动节点，用
el.matches(':has(.error)')判断是否满足条件（注意：这行代码本身仍需浏览器支持:has()—— 所以实际要用el.querySelector('.error') !== null替代） - 只更新受影响的父元素，避免全量重扫；例如监听的是
.form-group，就只检查它的直接子树 - 初始渲染后要手动触发一次扫描，否则首屏不生效
示例：给含 .invalid 子项的表单组加状态类
立即学习“前端免费学习笔记（深入）”；
const observer = new MutationObserver(() => {
document.querySelectorAll('.form-group').forEach(group => {
const hasInvalid = group.querySelector('.invalid') !== null;
group.classList.toggle('has-invalid', hasInvalid);
});
});
observer.observe(document.body, { childList: true, subtree: true });
// 初次运行
document.querySelectorAll('.form-group').forEach(group => {
const hasInvalid = group.querySelector('.invalid') !== null;
group.classList.toggle('has-invalid', hasInvalid);
});
哪些场景下 JS 模拟会出问题，必须提前规避
伪类模拟不是万能的，尤其在动态性极强或性能敏感的场景：
-
querySelectorAll('.parent:has(.child)')这类 JS 查询在不支持:has()的浏览器里直接抛SyntaxError，绝不能出现在运行时代码中——所有结构判断必须用.querySelector()或.matches()的等效写法 - 如果子元素通过
display: none或visibility: hidden控制显隐，querySelector仍能命中，但 CSS 的:has()默认只匹配渲染树中的元素（即不包含display: none的节点），行为不一致；需统一用getComputedStyle(el).display !== 'none'做二次过滤 - 大量频繁插入/删除节点时，
MutationObserver可能批量触发，建议加防抖（如setTimeout延迟 16ms 后合并处理），否则连续插入 10 个子项会触发 10 次扫描 - Shadow DOM 内部需要单独初始化 observer，
subtree: true不穿透影子边界
CSS 和 JS 协作时最容易漏掉的兼容细节
类名切换只是桥梁，真正落地时几个点常被跳过：
- CSS 中必须用真实类名替代伪类，比如把
.card:has(.card__badge)改成.card.has-badge，且确保新类名的权重与原规则一致（避免因 specificity 降低导致样式失效） - JS 添加类名后，若对应 CSS 使用了
transition，要注意浏览器是否已将新类名纳入动画触发条件——部分旧版 Safari 对动态添加类的 transition 支持不稳定，可加force reflow（如读取offsetHeight）确保触发 - 服务端渲染（SSR）页面首次加载时，JS 还未执行，类名缺失会导致闪屏；要么在 HTML 输出时预判并写入类名，要么用
data-属性标记状态，CSS 用[data-has-badge]兜底
最麻烦的其实是嵌套层级：比如你想表达 .list:has(li:first-child .urgent)，JS 里就得写三层查找逻辑，而且 :first-child 这种伪类无法被 JS 直接复现，只能靠 el.children[0] === target 等价判断——这种地方不画 DOM 树很容易绕晕。
