相邻兄弟选择器（A + B）可精准控制紧接在A后的第一个B元素，避免样式干扰。例如h2 + p { margin-top: 0; }仅取消紧跟标题的段落上边距，.item + .item { margin-left: 10px; }为连续项目添加左侧间隔，实现“除首个外均带间距”效果。适用于解决模块并列时外边距叠加、标题与段落间距不一、列表项分隔线等问题。结合类名如.card + .card { margin-top: 16px; }可提升可维护性与团队协作清晰度。合理使用能减少冲突，增强组件独立性与CSS可预测性。
当多个兄弟元素在同一个父容器中，容易出现样式互相干扰的问题，比如间距叠加、样式被意外继承或覆盖。使用相邻兄弟选择器（+）是一种精准控制和隔离特定兄弟元素样式的有效方式。
相邻兄弟选择器的作用
相邻兄弟选择器（A + B）匹配紧接在 A 元素后的第一个 B 元素。它不会选中所有同级元素，只作用于“紧挨着”的下一个兄弟，因此可以用来避免全局样式污染。
例如：
h2 + p {margin-top: 0;
}
.item + .item {
margin-left: 10px;
}
第一段代码只为紧跟在 h2 后的 p 取消上边距，避免其他位置的 p 被影响。第二段为连续的 .item 添加左侧间距，实现“除第一个外都带间隔”的效果，无需额外类名。
立即学习“前端免费学习笔记（深入）”；
解决常见干扰场景
以下几种情况适合用相邻兄弟选择器隔离样式：
- 多个模块并列时，避免重复设置外边距导致叠加 —— 使用 + 为后续元素单独设 margin
- 标题与段落间距不统一 —— 仅对特定顺序的组合调整间距
- 列表项之间需要分隔线，但首项不需要 —— li + li 添加上边框
结合类名提升可维护性
虽然相邻兄弟选择器很实用，但过度依赖结构可能让样式难以维护。建议结合语义化类名使用：
.card + .card {margin-top: 16px;
}
这样既利用了 DOM 结构，又通过类名明确了意图，团队协作更清晰。
基本上就这些。合理使用相邻兄弟选择器，能有效减少样式冲突，提升组件独立性，让 CSS 更加健壮和可预测。
