本文详解如何使用 CSS 相邻兄弟选择器（+）在鼠标悬停某个元素时，动态修改其紧邻的后续兄弟元素的背景色等样式，无需 JavaScript，语义清晰、性能高效。
本文详解如何使用 css 相邻兄弟选择器（`+`）在鼠标悬停某个元素时，动态修改其紧邻的后续兄弟元素的背景色等样式，无需 javascript，语义清晰、性能高效。
在前端开发中，常需实现“悬停 A 元素 → 影响 B 元素”的交互效果。若 B 是 A 的紧邻后续兄弟元素（即同级、位于 A 正后方、中间无其他元素），CSS 原生即可优雅解决——无需 JS，不依赖事件监听，渲染性能更优。
核心方案是使用 相邻兄弟组合器 +：
.square:hover + .square2 {
background-color: #ff0000;
}
该规则表示：当 .square 被悬停时，立即跟在其后的、且类名为 .square2 的兄弟元素将应用红色背景。
✅ 正确 HTML 结构示例（必须保证顺序与相邻性）：
<div class="square"> <p class="square1_text">~66.6%</p> </div> <!-- ⚠️ 注意：.square2 必须紧跟在 .square 后，中间不能有换行符以外的其他元素（如空格、注释、文本节点均会破坏匹配） --> <div class="square2"> <p class="square2_text">~33.3%</p> </div>
⚠️ 重要限制说明：
-
+仅匹配紧邻的下一个兄弟元素，不支持跨元素或前序元素； - 若中间插入
<br>、<span></span>或注释<!-- -->，选择器将失效； - 如需影响所有后续兄弟（非仅紧邻），可改用通用兄弟组合器
~：.square:hover ~ .square2 { background-color: #ff0000; }但需注意这会匹配所有符合条件的后续
.square2，可能造成意外样式覆盖。
? 进阶提示：
- 若 DOM 结构无法保证相邻（如被其他组件隔离），推荐使用 JavaScript 的
mouseenter/mouseleave事件配合document.querySelector()精准控制； - 配合
transition可添加平滑动画：.square2 { transition: background-color 0.3s ease; }
总结：优先使用 .square:hover + .square2 实现简洁、高性能的悬停联动；确保 HTML 中两元素严格相邻，并通过浏览器开发者工具验证选择器是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
