本文介绍如何利用 css :has() 伪类实现“悬停任一同类元素时，所有同类型兄弟元素同步响应样式变化”，无需 javascript，纯 css 可控，适用于分组高亮等交互场景。
本文介绍如何利用 css :has() 伪类实现“悬停任一同类元素时，所有同类型兄弟元素同步响应样式变化”，无需 javascript，纯 css 可控，适用于分组高亮等交互场景。
在传统 CSS 中，选择器无法向上查找父元素或横向影响其他兄弟元素——这意味着仅靠 .red-row:hover 只能改变当前被悬停的元素自身样式，无法波及同组其他 .red-row 元素。但现代 CSS 提供了突破性方案：:has() 伪类，它允许我们基于子元素的状态（例如是否被悬停）来为祖先元素设置条件样式，从而间接驱动其后代中所有匹配元素的样式更新。
核心思路是：将所有目标元素包裹于同一父容器内，并在该父容器上使用 :has() 检测是否存在某类元素处于 :hover 状态；一旦满足条件，即对容器内所有同类元素统一应用样式。
以下为完整可运行示例：
<div class="row-group"> <p class="red-row">Red Row</p> <p class="red-row">Red Row</p> <p class="red-row">Red Row</p> <p class="blue-row">Blue Row</p> <p class="blue-row">Blue Row</p> <p class="blue-row">Blue Row</p> </div>
对应 CSS 如下：
立即学习“前端免费学习笔记（深入）”；
/* 当 .row-group 内任意 .red-row 被悬停时，所有 .red-row 均变为红色背景 */
.row-group:has(.red-row:hover) .red-row {
background-color: #ff6b6b;
color: white;
}
/* 同理处理蓝色组 */
.row-group:has(.blue-row:hover) .blue-row {
background-color: #4ecdc4;
color: white;
}
/* 可选：重置默认状态，避免初始高亮 */
.red-row, .blue-row {
transition: background-color 0.2s ease, color 0.2s ease;
padding: 10px;
margin: 2px 0;
border-radius: 4px;
}✅ 优势说明：
- 完全声明式、无 JS 干预，语义清晰，维护成本低；
- 支持任意数量同类型元素，分组逻辑由 class 统一控制；
- 可叠加多组规则（如 .green-row、.gray-row），互不干扰。
⚠️ 重要注意事项：
- :has() 目前 尚未被 Firefox 原生支持（截至 Firefox 128，仍需启用实验性标志 layout.css.has-selector.enabled）；Chrome 105+、Edge 105+、Safari 15.4+ 已稳定支持；
- 父容器必须显式存在（不能依赖 作为隐式上下文），否则选择器无效；
- 避免过度嵌套 :has()（如 :has(:has(...))），可能影响性能与兼容性；
- 若需全浏览器兼容，建议搭配轻量 JS 回退方案（例如监听 mouseenter 并动态添加 .group-hover-red 类）。
总结而言，:has() 为 CSS 带来了前所未有的“条件感知”能力。在本例中，它巧妙地将“悬停触发”与“批量响应”解耦至父子关系层面，使原本受限的选择器模型焕发出新的表现力——这是现代 CSS 迈向更强大布局与交互控制的关键一步。
