:has()支持子变父变，但需chrome 105+/safari 15.4+，firefox不支持；可响应:checked、:focus、:hover、:invalid、元素存在性等子状态，不支持伪元素、嵌套:has或:nth-child；悬停需可交互元素；慎用于深层嵌套与body/html。
:has() 能直接实现“子变父变”，但浏览器支持和嵌套深度限制必须提前确认——Chrome 105+、Safari 15.4+ 可用，Firefox 尚未支持；且不能在 @keyframes 或 @media 中使用。
哪些子元素状态能触发父级样式变化？
只要子元素满足 CSS 选择器条件，:has() 就能捕获：表单控件的交互态（:checked、:focus）、伪类（:hover、:invalid）、甚至元素存在性（img、.error）。
常见有效组合：
-
label:has(input:checked)→ 给复选框父标签加高亮 -
article:has(.comment:empty)→ 文章无评论时隐藏评论区容器 -
form:has(input:invalid)→ 表单含非法输入时整体加红边框
注意：:has() 不接受伪元素（如 ::before）或自身（:has(:has(...))），也不支持 :nth-child() 等结构伪类作为内部选择器。
为什么 :has(.child:hover) 有时不生效？
根本原因是“悬停目标”必须是可悬停元素——<div> 默认不可聚焦、无交互行为，部分浏览器（尤其 Safari）对非交互元素的 <code>:hover 检测不敏感。
确保生效的实操建议：
- 给子元素加
tabindex="0"或cursor: pointer显式声明交互意图 - 优先用
button、a、input等原生可交互标签作触发子元素 - 避免写成
section:has(div:hover)，改用section:has(button:hover)
错误示例：nav:has(a:hover) { background: #eee; } 在 Safari 中可能延迟响应，加 a { cursor: pointer; } 可稳定触发。
性能与兼容性避坑指南
:has() 是“关系型选择器”，浏览器需向上遍历 DOM 树，深层嵌套（>3 层）或大量匹配目标会明显拖慢渲染。实际项目中要严控使用密度。
安全实践：
- 只用于关键交互反馈（如表单校验、菜单展开态），不用在动画或滚动场景
- 用
body:not(.no-has) .target:has(...)配合 JS 检测降级，避免 Firefox 用户完全丢失样式 - 避免在
body或html上直接用:has()，易引发全页面重排
检测支持的 JS 片段：CSS.supports('selector(:has(*))')，返回 true 才启用对应 CSS 规则。
最易被忽略的是动态插入内容——通过 innerHTML 或 appendChild 新增的子元素，其状态变化能即时触发 :has()，但若父元素本身是 JS 动态创建且未插入 DOM，:has() 规则不会预加载生效。
