:has()仅对DOM属性变更后可被CSS立即感知的状态稳定有效，如:checked、.error类、[open]属性、[value^="0.5"]等；:hover/:focus需注意交互性与DOM边界限制。
能改，但只对静态状态可靠；:hover、:focus 等动态伪类在部分浏览器中支持不稳定，别无脑套用。
哪些子元素状态真能触发父背景变化
:has() 当前真正稳定可用的子状态非常有限，核心是「DOM 属性变更后可被 CSS 立即感知」的状态。以下写法在 Chrome 105+ / Safari 15.4+ 中有效，Firefox 103+ 也已支持（2026 年主流版本基本覆盖）：
-
.card:has(input[type="checkbox"]:checked)—— ✅ 复选框勾选后，父卡片背景变色 -
.form:has(.field.error)—— ✅ 子元素带.error类时生效 -
nav:has(.submenu[open])—— ✅<details></details>或自定义[open]布尔属性存在即匹配 -
td:has(input[value^="0.5"])—— ✅ 属性值以特定字符串开头，适合表格数值反馈
注意：:has(.child:hover) 在 Safari 中可能延迟或不触发，Chrome 虽支持但要求子元素是可交互元素（如 button、a），div 默认不触发。
:hover 场景下父背景不生效的实操解法
直接写 section:has(div:hover) { background: yellow; } 很大概率失效——不是语法错，而是浏览器对非交互元素的 :hover 检测不敏感。
立即学习“前端免费学习笔记（深入）”；
- 给子元素加
tabindex="0"或cursor: pointer，显式声明其可交互性 - 优先用原生可聚焦标签：改用
section:has(button:hover)或section:has(a:hover) - 若必须用
div，加role="button"+tabindex="0"，再配 CSSuser-select: none防误选 - 更稳妥的替代方案：把
:hover放在父元素上，用后代选择器控制子元素样式（如section:hover .child），避免依赖:has()
为什么 :has(input:focus) 有时没反应
焦点状态依赖真实 DOM 行为，常见失效原因不是选择器写错，而是：
- 目标
input被设为disabled或readonly→ 无法获得焦点 →:focus不匹配 - 父容器有
pointer-events: none或contain: layout，干扰焦点事件传播 - 实际
input在 Shadow DOM 内（如 Web Component 封装）、或通过 React Portal 渲染到 body 外 →:has()无法跨边界检测 - HTML 结构错误：比如
label:has(input:focus)，但input实际不在label内部，只是靠for关联 →:has()只认后代关系，不认语义关联
性能与结构陷阱必须提前踩住
:has() 是向上遍历的选择器，浏览器需检查每个候选父元素是否满足内部条件。深层嵌套或高频匹配会拖慢渲染：
- 避免在
body或html上直接写:has()，易引发全页面重排 - 慎用于列表项超过 50 条的场景，尤其配合
:has(.item:nth-child(odd))这类结构伪类（不支持，但有人误试） - 动态插入内容没问题（
appendChild新增的子元素状态变化可即时触发），但若父元素本身是 JS 创建后暂未挂载到 DOM，则规则不会预加载 - 服务端渲染（SSR）项目中，确保 HTML 初始状态就含目标子元素，否则首屏可能漏样式
最常被忽略的一点：不要指望 :has() 在 @media 或 @keyframes 中工作——它不能出现在这些上下文里，CSS 解析器会直接丢弃整条规则。
