相邻兄弟选择器与通用兄弟选择器

相邻兄弟选择器和通用兄弟选择器是CSS中用于选择具有相同父元素的兄弟元素的选择器。它们在样式控制中非常实用，能够精准定位文档结构中特定位置的元素。

相邻兄弟选择器（+）

相邻兄弟选择器使用加号（+）连接两个选择器，匹配紧跟在第一个元素之后的第二个元素。这两个元素必须具有相同的父元素，且第二个元素必须紧邻第一个元素。

基本语法

selector1 + selector2 {
  /* 样式规则 */
}

示例1：改变紧邻段落的样式

假设有以下HTML结构：

<h2>标题</h2>
<p>第一个段落</p>
<p>第二个段落</p>

使用相邻兄弟选择器：

h2 + p {
  color: red;
}

只有紧跟在<h2>后面的第一个<p>会变为红色，第二个<p>不受影响。

示例2：表单元素间隔控制

<label>用户名：</label>
<input type="text">
<label>密码：</label>
<input type="password">

通过相邻兄弟选择器为相邻的<label>和<input>添加间距：

label + input {
  margin-left: 10px;
}

注意事项

• 如果两个元素之间有其他元素（如注释或文本节点），选择器仍然有效。
• 仅匹配直接相邻的兄弟元素，非连续的兄弟元素不会被选中。

通用兄弟选择器（~）

通用兄弟选择器使用波浪号（~）连接两个选择器，匹配第一个元素之后的所有同层级兄弟元素，无论它们是否直接相邻。

基本语法

selector1 ~ selector2 {
  /* 样式规则 */
}

示例1：标题后的所有段落样式

<h2>章节标题</h2>
<p>段落1</p>
<div>分隔内容</div>
<p>段落2</p>

使用通用兄弟选择器：

h2 ~ p {
  font-style: italic;
}

段落1和段落2都会变为斜体，即使它们之间有一个<div>分隔。

示例2：动态高亮后续列表项

<ul>
  <li class="active">项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

通过通用兄弟选择器将.active之后的所有<li>变为灰色：

.active ~ li {
  color: #999;
}

注意事项

• 匹配的范围是从第一个元素开始之后的所有同级元素，不限于直接相邻。
• 如果第二个选择器与第一个选择器相同（如div ~ div），则第一个元素本身不会被选中。

对比与应用场景

差异对比

实际应用案例

案例1：导航菜单分隔符

<nav>
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
</nav>

为导航链接之间添加分隔线（除第一个链接外）：

a + a {
  border-left: 1px solid #ccc;
  padding-left: 10px;
}

案例2：折叠面板控制

<div class="trigger">点击展开</div>
<div class="content">隐藏内容...</div>
<div class="content">更多内容...</div>

通过通用兄弟选择器实现点击后展开所有后续内容块：

.trigger:focus ~ .content {
  display: block;
}

案例3：状态联动

<input type="checkbox" id="toggle">
<label for="toggle">切换</label>
<p>描述文本1</p>
<p>描述文本2</p>

当复选框被选中时，改变所有后续段落的颜色：

#toggle:checked ~ p {
  color: blue;
}

高级技巧与组合使用

结合属性选择器

input[type="text"] ~ button {
  background-color: #f0f0f0;
}

与伪类配合

li:first-child ~ li {
  border-top: 1px dashed #ddd;
}

多层嵌套结构中的使用

<section>
  <h3>子标题</h3>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
</section>

选择同一层级的所有.box：

h3 ~ .box {
  border: 1px solid blue;
}

性能注意事项

• 在现代浏览器中性能差异可以忽略不计。
• 避免在深层嵌套结构中过度使用（如body ~ div）。