相邻兄弟选择器（+）选中紧随其后的同级元素，通用兄弟选择器（~）选中之后所有同级元素，两者均需共享同一父元素。例如h2 + p仅选中紧跟h2的第一个p，而h2 ~ p选中h2后所有同级p，常用于设置标题后段落样式、表单提示高亮或折叠面板内容区样式，无需额外类名或JavaScript，关键在于理解元素位置与层级关系。

在css中，可以通过兄弟选择器来选中与某个元素处于同一父级下的其他元素。这类选择器主要分为两种：相邻兄弟选择器和通用兄弟选择器。

相邻兄弟选择器（+）

使用加号（+）可以选择紧跟在另一个元素后的下一个同级元素，前提是它们拥有相同的父元素。

例如：

如果你想要选中紧跟在h2后面的p元素：

h2 + p { color: red; }

立即学习“前端免费学习笔记（深入）”；

这个规则只会让紧接在h2之后的第一个同级p元素文字变红，其他的p不会受影响。

AI卡通生成器

免费在线AI卡通图片生成器 | 一键将图片或文本转换成精美卡通形象

51

查看详情

通用兄弟选择器（~）

使用波浪号（~）可以选择位于某元素之后的所有同级元素，不限于紧邻的下一个。

例如：

如果你想让所有在h2之后的同级p元素都变红：

h2 ~ p { color: blue; }

只要p元素在h2后面，并且是同一层级，不管中间有没有其他类型的元素，都会被选中。

常见使用场景

• 文章标题下方的第一个段落设置不同样式
• 表单中某个输入框之后的提示文字高亮显示
• 折叠面板中展开项之后的内容区域添加边距或背景色

基本上就这些。掌握+和~的区别，就能灵活控制兄弟元素的样式，不需要依赖额外的类名或JavaScript。关键是理解它们的位置关系和层级限制。不复杂但容易忽略细节。

以上就是如何通过