相邻兄弟选择器（+）仅选中紧接在指定元素后的第一个兄弟元素，如h2 + p{color:red;}；通用兄弟选择器（~）则选中该元素之后所有同级兄弟元素，如h2 ~ p{color:blue;}。
在CSS中，兄弟选择器用于选择位于同一父元素下的某些相邻或后续的兄弟元素。主要有两种：相邻兄弟选择器（+）和通用兄弟选择器（~）。它们用法相似但作用范围不同。
相邻兄弟选择器（+）
使用+符号，它选择紧接在指定元素后的第一个兄弟元素，且两者必须有相同的父元素。
你想选中紧跟在h2后面的p元素：
h2 + p {
color: red;
}
只有当p元素直接跟在h2后面时才生效。如果中间插入了其他元素，则不匹配。
立即学习“前端免费学习笔记（深入）”；
HTML结构示例：
标题
这个段落会被选中
这个不会被+选中
通用兄弟选择器（~）
使用~符号，它选择在指定元素之后的所有同级兄弟元素，不要求紧邻。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
你想选中所有在h2之后的p元素：
h2 ~ p {
color: blue;
}
只要p元素出现在h2，无论中间有没有别的元素，都会被选中。
HTML示例：
标题
一些内容这个也会被~选中
其他元素这个也会被选中
实际应用场景
这两种选择器常用于结构化布局或样式控制，比如文章排版、表单样式等。
- 用
h1 + p设置文章首段缩进或字体加粗 - 用
input:checked ~ label实现自定义复选框或选项卡切换（配合伪类） - 控制列表中某个特定项之后的所有项的样式
注意点：
- 两个选择器都只朝文档流的后方匹配，不能选前面的元素
- 元素必须是同级兄弟，嵌套在不同父容器中无效
-
+更精确，~更宽松，按需选择
+和~能让你更灵活地根据元素位置写样式，减少不必要的类名。 
