本文详解如何利用 CSS 相邻兄弟选择器（+）实现“悬停一个元素时改变其后紧邻兄弟元素的背景色”，无需 JavaScript，语义清晰、性能高效。
本文详解如何利用 css 相邻兄弟选择器（`+`）实现“悬停一个元素时改变其后紧邻兄弟元素的背景色”，无需 javascript，语义清晰、性能高效。
在 Web 开发中，常需实现交互式视觉反馈，例如：当用户将鼠标悬停在第一个数据块（.square）上时，自动高亮其后紧跟的第二个数据块（.square2）。这种效果完全可通过纯 CSS 实现，关键在于正确使用 相邻兄弟选择器（+）。
该选择器仅匹配紧接在指定元素之后、且同级（即共享同一父容器）的下一个兄弟元素。因此，HTML 结构必须保证 .square2 紧跟在 .square 之后，中间不能插入其他非空元素（如 <br> 或注释可能影响渲染，建议避免）。
✅ 正确的 CSS 写法如下：
.square:hover + .square2 {
background-color: #ff0000; /* 悬停 .square 时，.square2 背景变红 */
}对应 HTML 需保持严格顺序与层级：
立即学习“前端免费学习笔记（深入）”；
<div class="square"> <p class="square1_text">~66.6%</p> </div> <div class="square2"> <p class="square2_text">~33.3%</p> </div>
⚠️ 注意事项：
- ❌
#square2.background_color是无效语法（ID 选择器用#，类名用.，CSS 属性名用连字符background-color）； - ❌
.square:hover .square2表示后代选择器（.square2必须在.square内部），不适用于本例； - ❌
.square:hover ~ .square2（通用兄弟选择器）虽可匹配后续任意位置的.square2，但不够精确，易引发意外样式覆盖； - ✅ 若需支持更灵活的 DOM 顺序（如
.square2在前），则需借助 JavaScript 监听mouseenter/mouseleave事件动态添加/移除类名。
总结：优先使用 + 选择器实现简洁、高性能的悬停联动；确保 HTML 元素顺序与父子关系符合 CSS 选择器逻辑；避免滥用内联样式或 JS 以维持代码可维护性与可访问性。
