编辑“︁CSS组合选择器”︁

= CSS组合选择器 =

'''CSS组合选择器'''（Combinator Selectors）是CSS中用于基于元素间关系选择元素的强大工具。它们通过连接两个或多个简单选择器来定义特定的匹配规则，使开发者能够精确控制样式的作用范围。本文将系统讲解四种主要组合选择器及其应用场景。

== 基本概念 ==
组合选择器通过特殊符号（空格、<code>></code>、<code>+</code>、<code>~</code>）描述元素之间的层级或相邻关系。其核心逻辑可表示为：
<math>\text{组合选择器} = \text{选择器A} \quad \text{组合符} \quad \text{选择器B}</math>

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

=== 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>

== 关系图示 ==
<mermaid>
graph TD
    A[祖先元素] --> B[直接子元素]
    B --> C[孙子元素]
    D[相邻元素] --> E[+ 后的第一个元素]
    F[基准元素] --> G[~ 后的所有元素]
</mermaid>

== 组合优先级 ==
当多个组合选择器同时匹配时，CSS按以下优先级应用样式：
# 子选择器（>） > 后代选择器（空格）
# 相邻兄弟（+）和通用兄弟（~）优先级相同
# 具体性（specificity）更高的选择器优先

== 实际应用案例 ==
'''场景：'''创建带图标的导航菜单
<syntaxhighlight lang="html">
<nav>
  <ul>
    <li><a href="#"><span class="icon"></span>首页</a></li>
    <li><a href="#"><span class="icon"></span>产品</a></li>
  </ul>
</nav>
</syntaxhighlight>

<syntaxhighlight lang="css">
/* 仅选中nav内的直接ul子元素 */
nav > ul {
  list-style: none;
}

/* 选中所有li下的a元素 */
nav li a {
  padding: 8px 12px;
}

/* 紧接在.icon后的文字 */
.icon + span {
  margin-left: 5px;
}
</syntaxhighlight>

== 性能优化建议 ==
* 避免过度嵌套（如<code>div > ul > li > a</code>）
* 后代选择器（空格）比子选择器（>）性能开销更大
* 在大型DOM树中，优先使用类选择器与组合选择器配合

== 常见问题 ==
'''Q: <code>div p</code> 和 <code>div > p</code> 有何区别？'''<br>
A: 前者匹配div内所有p元素（无论嵌套多深），后者仅匹配直接子元素p。

'''Q: 为什么<code>h2 + p</code>对动态插入的元素无效？'''<br>
A: 相邻兄弟选择器只匹配初始DOM结构。如需动态生效，需使用JavaScript或重新应用样式。

通过掌握组合选择器，开发者可以写出更精准、高效的CSS规则。建议在实践中结合浏览器开发者工具观察选择器的匹配结果。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS选择器]]