父元素响应子元素hover或focus状态应使用:has()伪类，但需注意浏览器兼容性（Chromium 105+、Firefox 121+、Safari 15.4+）、不可匹配隐藏元素、不支持嵌套:has()或:not(:has())、避免属性值未加引号等限制。
父元素怎么响应子元素的 hover 或 focus 状态
直接用 :has() 就行，但得注意浏览器支持和嵌套限制。它不是“监听”，而是 CSS 层面的向上匹配——父级样式能否生效，取决于子级当前是否满足括号里的条件。
常见错误是写成 .parent:has(.child:hover) { color: red; } 却发现没反应：要么子元素没真正 hover（比如被 pointer-events: none 挡住），要么父级用了 display: none 或 visibility: hidden——:has() 不匹配隐藏元素。
-
:has()只在现代 Chromium（105+）、Firefox（121+）和 Safari（15.4+）里稳定可用，旧版 Edge / iOS Safari 15.3 及更早基本不认 - 不能跨 shadow DOM，也不能匹配
<slot></slot>投影后的内容 - 伪类如
:focus-within虽兼容性更好，但能力有限（只对 focus 有效，且要求子元素可聚焦）
:has() 里能写哪些选择器才不会失效
必须是「可计算」的选择器：不能含 :has() 自身嵌套（:has(:has(...)) 无效），不能用 :not() 包裹 :has()，也不能出现无法静态解析的动态伪类（如 :target 在非锚点场景）。
实际中最常踩的坑是用了属性选择器但忘了引号：.form:has([data-valid="true"]) 正确，.form:has([data-valid=true]) 在某些浏览器里会失败。
立即学习“前端免费学习笔记（深入）”；
- 支持复合选择器：
.card:has(.badge.error, .status[aria-busy="true"]) - 不支持兄弟选择器反向作用：
.item:has(+ .next:hover)无效（+是向右找，:has()只能向上或向下找后代/子代） - 性能上，
:has()触发重排开销比普通选择器大，别在滚动频繁区域滥用
替代方案：当 :has() 不可用时怎么模拟
没有 :has() 时，纯 CSS 几乎无解——父级无法感知子级状态。这时候就得靠 JS 补位，但不是加 class 那么粗暴。
关键在于最小化 DOM 操作：监听子元素事件，只在状态变化时切换一个语义清晰的 class，比如 data-child-hovered，然后用 [data-child-hovered] 选中父级。
- 避免监听
mouseover——它冒泡、触发频繁；改用mouseenter+mouseleave更精准 - 如果子元素是动态插入的，用事件委托：
parentElement.addEventListener('mouseenter', e => { if (e.target.matches('.trigger')) parent.classList.add('child-hovered'); }) - CSS 里写
.parent[child-hovered] .child::before { content: "✓"; }，保持样式逻辑和 JS 解耦
表单验证场景下 :has() 的典型写法
比如输入框变红时，让外层 .field 加个红色边框，这是 :has() 最实用的落地点。
别写 .field:has(input:invalid) { border-color: #e53e3e; } 就完事——:invalid 在用户还没输时就可能触发（比如必填字段为空），体验反而差。应该结合 :user-invalid（仅在用户交互后校验失败才生效）。
- 推荐组合：
.field:has(input:user-invalid) { border-color: #e53e3e; } - 要同时支持多个子控件？
.field:has(input:user-invalid, select:user-invalid, textarea:user-invalid) - 注意
:user-invalid在 Safari 中需开启实验性功能（webkit-appearance相关），部分老版本不支持
复杂点在于：CSS 无法区分“哪个子元素出错”，所以如果父级要根据具体错误类型显示不同图标，还是得靠 JS 注入 data 属性。这点容易被忽略——:has() 很强，但不是万能状态总线。
