CSS 选择器全解析：兄弟、子、后代，一篇就能彻底搞懂！

CSS 选择器完全解析：兄弟、子、后代一次掌握

在前端开发中，CSS 选择器是基础也是核心。熟练掌握它们不仅能精准控制页面样式，还能提升布局和组件的可维护性。通过示例，全面讲解 兄弟选择器、子选择器和后代选择器，帮助你建立清晰的概念。

---

1. 相邻兄弟选择器：A + B

语法：

A + B {
    /* 样式 */
}

含义：
选择紧跟在 A 后面的第一个兄弟元素 B。

示例：

<h1>标题</h1>
<p>这是第一段文字</p>
<p>这是第二段文字</p>

h1 + p {
    color: red;
}

效果：
只有第一段文字变红，因为它紧邻 <h1>；第二段文字不受影响。

总结：

• 仅匹配紧邻的元素
• 常用于控制标题后的首条内容、列表首项等

---

2. 通用兄弟选择器：A ~ B

语法：

A ~ B {
    /* 样式 */
}

含义：
选择位于 A 之后、且与 A 同级的所有 B 元素，不要求紧邻。

示例：

<h1>标题</h1>
<p>第一段文字</p>
<p>第二段文字</p>

h1 ~ p {
    color: blue;
}

效果：
第一段和第二段文字都变蓝。

与 + 的区别：

• + 只匹配紧邻元素
• ~ 匹配所有同级后续元素

---

3. 子选择器：.parent > child

语法：

.parent > child {
    /* 样式 */
}

含义：
选择 .parent 的直接子元素 child。

示例：

<div class="container">
  <p>直接子元素</p>
  <div class="inner">
      <p>嵌套段落</p>
  </div>
</div>

.container > p {
    color: pink;
}

效果：
只有直接子元素 <p> 被选中，嵌套在内部 <div> 的 <p> 不受影响。

总结：

• 精准控制层级
• 避免误操作嵌套元素
• 常用于父容器对子元素的统一样式

---

4. 后代选择器：.ancestor descendant

语法：

.ancestor descendant {
    /* 样式 */
}

含义：
选择 .ancestor 内的所有 descendant 元素，不论层级深浅。

示例：

<div class="container">
  <p>第一段</p>
  <div class="inner">
      <p>内部段落</p>
  </div>
</div>

.container p {
    text-decoration: underline;
}

效果：
所有 <p> 元素都会带下划线，包括直接子元素和嵌套元素。

总结：

• 用于控制全局样式
• 层级越深也能匹配
• 与子选择器不同，匹配所有后代元素

---

5. 选择器优先级与层叠顺序

当同一个元素被多个选择器匹配时，最终样式由 CSS 层叠顺序（Cascade） 决定：

p + p { color: green; }
h1 ~ p { color: blue; }

• 如果一段 <p> 同时匹配两条规则，后写的样式会覆盖先写的（权重相同情况下）

• CSS 层叠规则：

  1. 权重（Specificity）
  2. 来源（inline > internal > external）
  3. 顺序（后者覆盖前者）

---

6. HTML 标签大小写

• HTML 标签名大小写不敏感：

h1 ~ P { color: blue; }

• 即使 <P> 是大写，也会匹配
• 推荐统一小写，便于阅读和维护

---

7. 选择器组合使用示例

选择器	含义	匹配示例
A + B	紧邻的兄弟	<h1>...</h1><p>...</p>
A ~ B	同级后续的兄弟	<h1>...</h1><p>...</p><p>...</p>
.parent > B	直接子元素	.container > p
.parent B	所有后代元素	.container p

常用组合示例：

.container > p + p   /* 精准控制第 2 个直接子元素 */
h1 ~ p > a           /* 复杂层级也能精准选中 */

---