编辑“︁CSS组合选择器”︁（章节）

== 四种组合选择器详解 ==

=== 1. 后代选择器（Descendant Selector） ===
通过'''空格'''连接两个选择器，匹配所有符合选择器B且是选择器A后代的元素。

'''语法：'''
<syntaxhighlight lang="css">
祖先元素 后代元素 {
  属性: 值;
}
</syntaxhighlight>

'''示例：'''
<syntaxhighlight lang="html">
<div class="article">
  <p>正文段落</p>
  <section>
    <p>嵌套段落</p>
  </section>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.article p {
  color: blue;  /* 同时选中直接和间接后代 */
}
</syntaxhighlight>

'''效果：'''所有在<code>.article</code>内的<code><p></code>元素（包括嵌套的）都会变为蓝色。

=== 2. 子元素选择器（Child Selector） ===
使用<code>></code>符号，仅匹配直接子元素（不包含孙子元素等间接后代）。

'''语法：'''
<syntaxhighlight lang="css">
父元素 > 子元素 {
  属性: 值;
}
</syntaxhighlight>

'''示例：'''
<syntaxhighlight lang="css">
.article > p {
  border-bottom: 1px solid #ccc;  /* 仅作用于直接子元素 */
}
</syntaxhighlight>

'''效果：'''只有直接位于<code>.article</code>下的<code><p></code>会添加下边框，嵌套在<code><section></code>中的段落不受影响。

=== 3. 相邻兄弟选择器（Adjacent Sibling Selector） ===
使用<code>+</code>符号，匹配'''紧接'''在选择器A后的第一个同级元素B。

'''语法：'''
<syntaxhighlight lang="css">
元素A + 元素B {
  属性: 值;
}
</syntaxhighlight>

'''示例：'''
<syntaxhighlight lang="html">
<h2>标题</h2>
<p>这段文字会受影响</p>
<p>这段文字不受影响</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
h2 + p {
  font-weight: bold;  /* 仅作用于h2后第一个p */
}
</syntaxhighlight>

=== 4. 通用兄弟选择器（General Sibling Selector） ===
使用<code>~</code>符号，匹配选择器A后的'''所有'''同级元素B。

'''语法：'''
<syntaxhighlight lang="css">
元素A ~ 元素B {
  属性: 值;
}
</syntaxhighlight>

'''示例：'''
<syntaxhighlight lang="css">
h2 ~ p {
  margin-left: 20px;  /* 作用于h2后的所有同级p */
}
</syntaxhighlight>