相邻兄弟选择器（+）用于选择紧接在某元素后的下一个同级元素，如h2 + p { margin-top: 1rem; }仅当p直接跟随h2时生效，适用于精准控制标题与首段间距、列表后说明文字等场景，避免多余类名；与通用兄弟选择器（~）不同，后者可选中后续所有匹配的同级元素，而+仅作用于紧邻的下一个元素，适合语义清晰的内容流布局，需注意HTML结构的连续性与选择器的精确性。
在CSS中，相邻兄弟选择器（Adjacent Sibling Selector）使用+符号来选择紧接在某元素后的另一个元素。这个选择器非常适合用来为紧跟特定元素的兄弟元素设置样式，比如控制标题下方段落的间距、列表项之间的距离等。
相邻兄弟选择器的基本语法
相邻兄弟选择器的写法是两个选择器之间用+连接，表示“选择紧接在第一个元素之后的第二个元素”。
例如：h2 + p { margin-top: 1rem; } 表示选择所有紧跟在 元素后的第一个 元素，并为其设置上边距。
这意味着只有当 p 是 h2 的直接下一个兄弟节点时才会生效。如果中间插入了其他元素（如 div 或 img），该样式就不会应用。
立即学习“前端免费学习笔记（深入）”；
使用场景：合理设置内容块间距
在实际布局中，我们常常希望标题与接下来的段落之间有一定的距离，但不想给所有段落都设置相同的 margin-top，以免造成不必要的空白。
这时就可以使用 + 选择器精准控制：
-
h1 + p：为紧跟一级标题的段落增加间距 -
ul + p：为列表后面的文字说明添加顶部留白 -
.alert + .btn：让警告提示后的按钮保持适当间隔
这样可以避免使用过多的类名或额外的包装元素来实现布局效果。
与通用兄弟选择器的区别
相邻兄弟选择器（+）只作用于紧邻的下一个兄弟元素，而通用兄弟选择器（~）可以选择后面所有的同级元素。
举个例子：h2 + p 只选中紧跟 h2 的那个 p；而 h2 ~ p 会选中 h2 后面所有同层级的 p 元素。
如果你只想调整第一段的距离，用 + 更精确；如果想统一设置多个后续段落的样式，~ 更合适。
实用建议与注意事项
使用相邻兄弟选择器设置间距时，注意以下几点：
- 确保HTML结构正确，元素必须是同级且顺序连续
- 不要依赖它来处理复杂布局，它适用于语义清晰的内容流
- 结合
margin-bottom或margin-top控制视觉节奏，提升可读性 - 可配合类名使用，如
.section > h3 + p提高选择精度
基本上就这些。相邻兄弟选择器虽小，但在细节排版中非常实用，能帮你写出更简洁、语义更强的CSS。
