各位前端的英雄好汉们，早上/下午/晚上好！我是你们的老朋友，今天咱们来聊聊CSS里那对既相似又不同的兄弟：相邻兄弟选择器（Adjacent Sibling Combinator，+）和通用兄弟选择器（General Sibling Combinator，~）。
这俩家伙，说白了，都是用来选择兄弟元素的，但一个“相邻”，一个“通用”，这其中的区别，可大了去了。别急，咱们慢慢道来，保证各位听完之后，能把它们玩得溜溜的！
一、初识兄弟：什么是兄弟选择器？
在CSS的世界里，兄弟元素指的是拥有相同父元素的元素。简单来说，就是同一个爹妈生的，排排坐吃果果的那些家伙们。
举个例子，在下面的HTML代码中，<h2>, <p>, <ul>, <ol> 都属于兄弟元素，因为它们都直接位于 <div> 标签内：
<div>
<h2>这是一个标题</h2>
<p>这是一段文本。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
</div>兄弟选择器，就是用来选择这些兄弟元素的。而+和~，就是两种不同的选择方式。
二、相邻兄弟选择器（+）：一步之遥，爱你在心口难开
相邻兄弟选择器（+）选择紧接在指定元素后面的兄弟元素。注意，是紧接，而且必须是后面的那个。就像暗恋一样，喜欢就在隔壁，但必须得是隔壁的那个，远了近了都不行。
语法：
A + B
含义：选择紧跟在元素A后面的元素B。
示例：
<div>
<h2>标题1</h2>
<p>段落1</p>
<h2>标题2</h2>
<p>段落2</p>
</div>h2 + p {
color: red;
}在这个例子中，只有紧跟在 <h2> 后面的 <p> 元素会被选中，也就是“段落1”。“段落2”因为前面不是直接紧跟着 <h2>，所以不会被选中。
应用场景：
-
调整相邻元素的间距： 比如，给紧跟在标题后面的段落添加更大的上边距，让它们看起来更舒服。
h1 + p { margin-top: 20px; } -
根据前面的元素改变后面的样式： 比如，如果一个列表前面紧跟着一个段落，就给这个列表添加一些额外的样式。
p + ul { margin-top: 10px; padding-left: 20px; } -
模拟一些简单的交互效果： 比如，当鼠标悬停在一个元素上时，改变它后面相邻元素的样式。虽然比较局限，但某些情况下也挺有用。
(注意: hover只能作用在链接或者块级元素上)a:hover + p { color: blue; }
表格总结：
| 特性 | 描述 |
|---|---|
| 选择范围 | 紧跟在指定元素后面的第一个兄弟元素 |
| 位置关系 | 必须是相邻，而且是后面的兄弟元素 |
| 应用场景 | 调整相邻元素间距、根据前面的元素改变后面的样式、模拟一些简单的交互效果 |
| 适用性 | 对元素之间的位置关系要求非常严格，适用范围相对有限 |
三、通用兄弟选择器（~）：博爱广施，雨露均沾
通用兄弟选择器（~）选择指定元素后面的所有兄弟元素。注意，是所有，只要在后面，是兄弟，都跑不掉。 就像一个乐善好施的大地主，只要是自家的佃户，都给分点好处。
语法：
A ~ B
含义：选择元素A后面的所有元素B。
示例：
<div>
<h2>标题1</h2>
<p>段落1</p>
<h2>标题2</h2>
<p>段落2</p>
<p>段落3</p>
</div>h2 ~ p {
color: blue;
}在这个例子中，所有在 <h2> 之后的 <p> 元素都会被选中，也就是“段落1”、“段落2”和“段落3”。 注意 <h2>标题2</h2> 依然会触发 h2 ~ p。
应用场景：
-
批量修改同一父元素下某些类型元素的样式： 比如，想让一个容器里所有段落都使用某种样式。
.container h2 ~ p { font-size: 16px; line-height: 1.5; } -
实现一些复杂的布局效果： 比如，根据某个元素的状态，影响它后面的所有兄弟元素的布局。
<input type="checkbox" id="toggle"> <label for="toggle">Toggle</label> <div> <p>First Paragraph</p> <p>Second Paragraph</p> <p>Third Paragraph</p> </div>#toggle:checked ~ div p { display: none; }在这个例子中，当复选框被选中时，
<div>内的所有<p>元素都会被隐藏。 -
构建一些动态的UI组件： 比如，在选项卡组件中，根据当前选中的选项卡，显示对应的内容区域。 虽然这种场景通常用 JavaScript 来实现，但也可以用 CSS 配合一些技巧来完成。
表格总结：
| 特性 | 描述 |
|---|---|
| 选择范围 | 指定元素后面的所有兄弟元素 |
| 位置关系 | 只要是后面的兄弟元素，都会被选中 |
| 应用场景 | 批量修改同一父元素下某些类型元素的样式、实现一些复杂的布局效果、构建一些动态的UI组件 |
| 适用性 | 适用范围更广，可以更灵活地控制兄弟元素的样式 |
四、实例对比：左右互搏，谁更胜一筹？
为了更好地理解 + 和 ~ 的区别，咱们来做一个实例对比。
HTML结构：
<div>
<h2>标题</h2>
<p>段落1</p>
<p>段落2</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<p>段落3</p>
</div>CSS代码：
h2 + p {
color: red; /* 只会选中 "段落1" */
}
h2 ~ p {
font-weight: bold; /* 会选中 "段落1"、"段落2" 和 "段落3" */
}在这个例子中，h2 + p 只会选中紧跟在 <h2> 后面的 “段落1”，将其颜色设置为红色。而 h2 ~ p 会选中 <h2> 后面的所有 <p> 元素，也就是 “段落1”、“段落2” 和 “段落3”，并将它们的字体加粗。
效果对比：
- 相邻兄弟选择器（
+）： 精准打击，只影响相邻的那个。 - 通用兄弟选择器（
~）： 范围攻击，影响后面的所有兄弟。
五、注意事项：躲坑指南，安全驾驶
在使用 + 和 ~ 时，需要注意以下几点：
- 位置关系至关重要：
+要求元素必须紧挨着，~要求元素必须在后面。如果位置关系不对，选择器就失效了。 - 只选择兄弟元素：
+和~只能选择兄弟元素，不能跨越父元素。 - 优先级： 和其他CSS选择器一样，
+和~也有优先级。如果样式冲突，需要根据优先级规则来判断哪个样式生效。 - 性能： 在大型项目中，过度使用
~可能会影响性能。因为它需要遍历所有后面的兄弟元素。所以，要谨慎使用，尽量避免不必要的选择。 - 可读性： 复杂的兄弟选择器可能会降低代码的可读性。尽量保持选择器简洁明了，方便维护。
六、实战演练：小试牛刀，大展身手
现在，咱们来做一个稍微复杂一点的实战演练。假设我们要创建一个简单的文章列表，要求：
- 每个文章标题下面紧跟着文章摘要。
- 如果文章摘要后面紧跟着另一个文章标题，就在摘要下面添加一个分割线。
- 所有文章摘要的字体颜色为灰色。
HTML结构：
<div class="article-list">
<h2>文章标题1</h2>
<p class="abstract">文章摘要1</p>
<h2>文章标题2</h2>
<p class="abstract">文章摘要2</p>
<h2>文章标题3</h2>
<p class="abstract">文章摘要3</p>
</div>CSS代码：
.abstract {
color: gray;
}
.abstract + h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 10px;
}在这个例子中，.abstract 类用于设置文章摘要的字体颜色。.abstract + h2 用于选择紧跟在文章摘要后面的文章标题，并在摘要下面添加一个分割线。
七、总结：兄弟齐心，其利断金
今天，咱们一起学习了CSS中的相邻兄弟选择器（+）和通用兄弟选择器（~）。 它们虽然都是用来选择兄弟元素的，但一个“相邻”，一个“通用”，应用场景和效果也大不相同。
- 相邻兄弟选择器（
+）： 精准打击，适用于需要精确控制相邻元素样式的场景。 - 通用兄弟选择器（
~）： 范围攻击，适用于需要批量修改同一父元素下某些类型元素的样式的场景。
掌握了这两种选择器，你就可以更加灵活地控制网页的样式，实现各种各样的布局效果。 记住，兄弟齐心，其利断金！ 希望大家在前端的道路上越走越远，成为真正的CSS大师！
好了，今天的讲座就到这里。 感谢各位的聆听，咱们下次再见！ 各位有什么问题，欢迎随时提问，我会尽力解答的！