当前主流浏览器对 :has(:hover) 的支持仍不完善，css 规范明确限制了 :has() 内部可接受的“关系选择器”类型，:hover 因涉及用户交互状态而被排除在外；需通过组合相邻兄弟选择器与独立 :hover 规则实现等效高亮效果。
当前主流浏览器对 :has(:hover) 的支持仍不完善，css 规范明确限制了 :has() 内部可接受的“关系选择器”类型，:hover 因涉及用户交互状态而被排除在外；需通过组合相邻兄弟选择器与独立 :hover 规则实现等效高亮效果。
在实际开发中，我们常希望实现「相邻元素联动高亮」——例如表格中两行逻辑关联，鼠标悬停任一行时，两行同时变色。直觉上会尝试使用 :has(+ .b:hover)，但该写法目前在所有浏览器中均无效。原因在于：CSS Selectors Level 4 规范明确要求 :has() 的参数必须是「静态可计算的选择器」，而 :hover 是动态伪类（依赖运行时用户行为），因此被禁止在 :has() 内部使用。
✅ 正确解法是分离交互逻辑，利用 CSS 原生能力组合实现：
.a, .b {
width: 100px;
height: 100px;
background: green;
margin: 25px;
}
/* 当 .a 自身被悬停，或其后紧跟的 .b 被悬停时，.a 变粉 */
.a:hover,
.a:has(+ .b:hover) {
background: pink;
}
/* 当 .b 自身被悬停，或其前一个兄弟 .a 被悬停时，.b 变粉 */
.b:hover,
.a:hover + .b {
background: pink;
}<div class="a"></div> <div class="b"></div> <div class="a"></div> <div class="b"></div>
⚠️ 注意事项：
- :has(+ .b:hover) 在 Chrome 125+ 和 Safari 17.4+ 中已支持（需确认浏览器版本），但 Firefox 仍需手动启用 layout.css.has-selector.enabled 标志，且 :hover 在 :has() 中始终被拒绝；
- 上述方案兼容性更广：hover 独立规则在所有现代浏览器中 100% 可用，+ 相邻兄弟选择器也无兼容性问题；
- 若用于表格场景（如 <tr class="a"> 和 <tr class="b">），请确保 HTML 结构严格相邻（中间不能插入其他 <tr> 或注释）；
- 不推荐 JS 方案（如监听 mouseenter）——纯 CSS 更轻量、性能更好，且天然支持键盘焦点（配合 :focus-within 可进一步增强可访问性）。
总结：放弃 :has(:hover) 的幻想，拥抱「分散定义、组合生效」的 CSS 思维。用 .a:hover 控制自身，用 .a:hover + .b 控制邻居，再用 .b:hover 和 .a:has(+ .b)（仅作静态匹配）补全逻辑闭环——这才是稳健、可维护、跨浏览器一致的实践路径。
立即学习“前端免费学习笔记（深入）”；
