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

CSS中的加号（`+`）选择器被叫做相邻兄弟选择器。它的用途是选中紧接在另一个元素后面的特定元素。其基本语法是：`element1 + element2`，这里的`element2`要满足两个条件，一是必须紧跟在`element1`之后，二是二者要拥有相同的父元素。

核心特性
1. **相邻性**：该选择器只会选中紧跟在`element1`后面的`element2`，中间不能有其他元素间隔。
2. **同级关系**：`element1`和`element2`必须处于同一父元素之下。

示例展示
下面是一个使用相邻兄弟选择器的示例：
html <style> /* 选中紧接在h2后面的p元素 */ h2 + p { color: red; } </style> <div> <h2>标题</h2> <p>这个段落会变成红色。</p> <!-- 会被选中 --> <p>这个段落不会变颜色。</p> <!-- 不会被选中 --> </div>

实际应用场景
1. **表单样式设置**：
css label + input { margin-top: 5px; }
2. **标题与副标题的样式区分**：
css h1 + h2 { font-size: 1.2em; }
3. **列表项的样式处理**：
css li:first-child + li { font-weight: bold; }

与其他选择器的差异
- **相邻兄弟选择器（`A + B`）**：只选中紧跟在`A`后的`B`。
- **通用兄弟选择器（`A ~ B`）**：能选中`A`后面所有的`B`，不管中间间隔多少其他元素。
- **子选择器（`A > B`）**：选中的是`A`的直接子元素`B`。

相邻兄弟选择器在实现一些特定的交互效果时非常有用，像点击展开/折叠内容后的样式变化等。