:has() 伪类可直接实现父元素基于子元素状态的样式控制，但需注意浏览器兼容性（Chrome/Edge 105+、Safari 15.4+、Firefox 121+）、括号内空格规范、不可嵌套伪元素、不触发JS动画、需JS兜底及性能影响。
能直接实现，但必须注意浏览器支持范围和括号内空格规则；Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+ 已稳定可用，IE 和旧版 Android WebView 不支持。
:has() 基础写法与空格陷阱
浏览器实际解析 :has() 时，对括号内语法非常敏感。W3C 验证器会把 :has(.error) 当作非法语法报错，但所有现代浏览器都支持它——只是更推荐加一个前置空格来规避解析歧义。
- ✅ 安全写法：
:has( .error)、:has( input:focus)、:has( > button.primary) - ⚠️ 尽量避免：
:has(.error)（虽能运行，但部分构建工具或 Linter 可能误报） - ❌ 错误写法：
:has(>.error)（除非你明确要“直接子元素”，否则漏掉空格会导致匹配失败） - ❌ 不支持嵌套伪元素：
:has(::before)或:has(*)会静默失效
:has() 响应 hover/focus 等动态状态
你可以用 :has() 捕获子元素的伪类状态，比如悬停、聚焦、校验失败等，从而改变父容器样式。它不是实时监听器，而是基于当前 DOM 快照做存在性判断。
-
.form-group:has(input:focus)→ 输入框获得焦点时高亮整个表单组 -
.card:has(.trigger:hover)→ 子元素被悬停时给卡片加阴影或背景色 -
section:has(.error:invalid)→ 表单域含无效输入时标记整块区域 - 注意：
:has(.child:hover)中的:hover是子元素真实处于悬停态，不是模拟；移动端无 hover，该规则在触摸设备上不生效
为什么不能用 :has() 触发 JS 动画或监听变化
:has() 是纯样式机制，它不触发重排（reflow），也不派发事件，更不会在 DOM 变化时回调。它只在样式计算阶段起作用，且仅响应“当前是否满足条件”这一静态事实。
立即学习“前端免费学习笔记（深入）”；
- ❌ 别写
:has(.loaded) { animation: fadeIn 0.3s; }并指望 JS 插入.loaded后自动播动画——动画只会执行一次（如果初始就满足），后续 class 切换不会重启 - ✅ 正确做法：JS 控制 class，CSS 用
.parent.loaded { … }写过渡；或用:has()控制显隐/尺寸等可 CSS 过渡的属性 - ⚠️ 动态插入的子元素（如
innerHTML += '<div class="child"></div>'）会被立即纳入:has()匹配，无需额外操作；但插入后立刻读取offsetHeight可能拿不到新样式结果，需getComputedStyle或微任务延迟
兼容性兜底与渐进增强策略
如果你的项目需支持 Firefox 120 或 Safari 15.3 以下版本，:has() 会完全失效。这时候不能靠降级样式“勉强可用”，而应提前设计 JS 备选路径。
- ✅ 推荐模式：用
:has()实现核心交互反馈（如表单分组高亮），同时保留 JS 监听focusin/mouseenter并切换data-has-focus类作为 fallback - ✅ CSS 中写两套：
.form-group:has(input:focus), .form-group[data-has-focus] { … } - ⚠️ 不要只写
:has()然后假设“老浏览器用户无所谓”——关键表单体验仍需保障 - ? 小技巧：用
@supports selector(:has(*))包裹规则，可安全隔离现代语法，避免旧引擎解析错误
真正容易被忽略的是：:has() 的选择器性能开销略高于普通选择器，尤其在深层嵌套或高频更新的列表中；若父元素有数百个同级节点且每个都带 :has(…)，滚动时可能轻微卡顿——这时该考虑用 class 控制而非全靠 :has()。
