css 相邻兄弟选择器（波浪号选择器）基本使用

CSS中的波浪线（`~`）选择器即通用兄弟选择器。它能够选中处于同一个父元素之中，位于某个元素之后的**所有特定元素**。其语法结构为：`element1 ~ element2`，这里的`element2`只要满足是`element1`的兄弟元素，并且在文档流中处于`element1`之后，就会被选中。

核心特性
1. **位置关联性**：`element2`要在`element1`之后，但二者之间可以存在其他元素。
2. **同级选择**：`element1`和`element2`必须是同一父元素的子元素。

示例展示
下面是一个通用兄弟选择器的使用示例：
html <style> /* 选中h2之后的所有p元素 */ h2 ~ p { color: blue; } </style> <div> <h2>标题</h2> <p>这个段落会变成蓝色。</p> <!-- 会被选中 --> <div>这是一个div。</div> <p>这个段落也会变成蓝色。</p> <!-- 会被选中 --> <h3>小标题</h3> <p>这个段落同样会变成蓝色。</p> <!-- 会被选中 --> </div>

实际应用场景
1. **高亮已读消息**：
css .unread ~ .message { background-color: #f0f0f0; }
2. **表单验证反馈**：
css input:focus ~ .error-message { display: block; }
3. **切换元素显示状态**：
css .toggle:checked ~ .content { max-height: 1000px; }

与其他选择器的差异
- **通用兄弟选择器（`A ~ B`）**：可以选中`A`后面的所有`B`元素。
- **相邻兄弟选择器（`A + B`）**：只能选中紧跟在`A`后面的那个`B`元素。
- **子选择器（`A > B`）**：用于选中`A`的直接子元素`B`。

通用兄弟选择器在实现需要批量选择后续元素的交互效果时十分实用，比如图片画廊的切换、手风琴菜单的展开与折叠等。