本文介绍如何利用 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+ 已稳定支持； 父容器必须显式存在（不能依赖 <body> 作为隐式上下文），否则选择器无效； 避免过度嵌套 :has()（如 :has(:has(…))），可能影响性能与兼容性； 若需全浏览器兼容，建议搭配轻量 JS 回退方案（例如监听 mouseenter 并动态添加 .group-hover-red 类）。
总结而言，:has() 为 CSS 带来了前所未有的“条件感知”能力。在本例中，它巧妙地将“悬停触发”与“批量响应”解耦至父子关系层面，使原本受限的选择器模型焕发出新的表现力——这是现代 CSS 迈向更强大布局与交互控制的关键一步。
评论(0)