CSS 中实现同类型兄弟元素悬停联动效果（如所有红色行同时高亮）

本文介绍如何利用 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 如下：立即学习"前端免费学习笔记（深入）"； 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。