相邻兄弟选择器（+）选中紧随其后的同级元素，通用兄弟选择器（~）选中之后所有同级元素，两者均需共享同一父元素。例如h2 + p仅选中紧跟h2的第一个p，而h2 ~ p选中h2后所有同级p，常用于设置标题后段落样式、表单提示高亮或折叠面板内容区样式，无需额外类名或JavaScript，关键在于理解元素位置与层级关系。
在CSS中，可以通过兄弟选择器来选中与某个元素处于同一父级下的其他元素。这类选择器主要分为两种：相邻兄弟选择器和通用兄弟选择器。
相邻兄弟选择器（+）
使用加号（+）可以选择紧跟在另一个元素后的下一个同级元素，前提是它们拥有相同的父元素。
例如：如果你想要选中紧跟在h2后面的p元素：
h2 + p { color: red; }
立即学习“前端免费学习笔记（深入）”；
这个规则只会让紧接在h2之后的第一个同级p元素文字变红，其他的p不会受影响。
通用兄弟选择器（~）
使用波浪号（~）可以选择位于某元素之后的所有同级元素，不限于紧邻的下一个。
例如：如果你想让所有在h2之后的同级p元素都变红：
h2 ~ p { color: blue; }
只要p元素在h2后面，并且是同一层级，不管中间有没有其他类型的元素，都会被选中。
常见使用场景
- 文章标题下方的第一个段落设置不同样式
- 表单中某个输入框之后的提示文字高亮显示
- 折叠面板中展开项之后的内容区域添加边距或背景色
基本上就这些。掌握+和~的区别，就能灵活控制兄弟元素的样式，不需要依赖额外的类名或JavaScript。关键是理解它们的位置关系和层级限制。不复杂但容易忽略细节。
