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

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

相邻兄弟选择器（Adjacent Sibling Selector）

相邻兄弟选择器使用 + 符号连接两个选择器，用于选择紧接在某个元素后的第一个兄弟元素。语法格式为：

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

基本用法示例

假设有以下HTML结构：

<ul>
  <li>Item 1</li>
  <li class="special">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

使用相邻兄弟选择器可以选中 .special 后面紧邻的 <li>：

.special + li {
  color: red;
  font-weight: bold;
}

效果："Item 3" 会显示为红色加粗，而其他列表项不受影响。

实际应用场景

1. 表单元素间隔控制
   为相邻的输入框添加顶部边距：

   input + input {
     margin-top: 10px;
   }
   

2. 标题与段落样式联动
   让紧跟在 <h2> 后的段落缩进：

   h2 + p {
     text-indent: 2em;
   }
   

注意事项

• 必须满足直接相邻的条件
• 只会匹配第一个符合条件的兄弟元素
• 对动态插入的DOM元素同样有效

通用兄弟选择器（General Sibling Selector）

通用兄弟选择器使用 ~ 符号，选择所有在指定元素后的兄弟元素（不要求紧邻）。语法为：

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

基本用法示例

沿用之前的HTML结构：

.special ~ li {
  background-color: #f0f0f0;
}

效果："Item 3" 和 "Item 4" 都会获得灰色背景。

典型应用案例

1. 状态变化影响后续元素
   当复选框被选中时，改变后面所有标签的样式：

   input[type="checkbox"]:checked ~ label {
     opacity: 0.5;
   }
   

2. 复杂布局控制
   在卡片布局中统一调整后续卡片间距：

   .card-highlight ~ .card {
     margin-left: 30px;
   }
   

与相邻选择器的区别

组合使用技巧

两种选择器可以组合使用实现更复杂的选择逻辑：

/* 选择h2后第一个段落，且该段落后面紧跟的div */
h2 + p ~ div {
  border-left: 3px solid blue;
}

响应式布局示例

在移动设备上调整相邻图片的间距：

@media (max-width: 768px) {
  img + img {
    margin-top: 15px;
  }
}

浏览器渲染机制

浏览器解析这两种选择器时采用从右向左的匹配原则：

1. 先找到所有 selector2 元素
2. 检查这些元素前面是否存在满足条件的 selector1 兄弟元素

性能优化建议

• 避免深层嵌套结构中使用兄弟选择器
• 尽量让右侧的选择器更具体（如使用类名而非标签名）
• 不要与通配符组合使用（如 div ~ *）

特殊场景处理

当处理动态内容时需注意：

// 新插入的元素也会应用现有样式规则
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>New Item</li>');

与其它选择器对比

常见误区

1. 误认为可以向前选择
   兄弟选择器只能选择后续元素，无法选择前面的兄弟。

2. 忽略空白文本节点
   在某些浏览器中，空白文本节点会影响兄弟选择器的匹配：

   <!-- 可能不匹配 -->
   <div>A</div>
   <div>B</div>
   
   <!-- 保证匹配 -->
   <div>A</div><div>B</div>
   

3. 过度依赖兄弟选择器
   在复杂布局中，过度使用可能导致样式难以维护。

高级应用实例

实现目录编号系统：

ol { counter-reset: section; }
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

/* 二级列表缩进 */
li ~ li ol {
  margin-left: 20px;
}

兼容性考虑

两种选择器在现代浏览器中支持良好：

• 完全支持IE8+
• 移动端浏览器无兼容问题
• 某些旧版本Android浏览器需要前缀（极少见）