CSS 组合器

学习目标

掌握 CSS 四种核心组合器的语法与作用机制
理解兄弟关系、父子关系在选择器中的表达方式
能够根据 HTML 结构精准定位目标元素
避免因组合器误用导致的样式覆盖或遗漏问题

正文内容

CSS 组合器用于定义两个选择器之间的结构关系，从而实现对特定位置元素的精确选取。它们是构建复杂、高效样式规则的关键工具。

通用兄弟选择器（`~`）

选取同一父元素下、位于指定元素之后的所有同类型兄弟元素。

<!DOCTYPE html>
<html>
<head>
    <title>组合器示例</title>
    <style>
        div ~ p {
            color: #009900;
            font-size: 32px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>通用兄弟选择器示例</div>
    <p>开发者社区</p>
    <div>
        <div>子 div 内容</div>
        <p>内部段落</p>
    </div>
    <p>技术分享</p>
    <p>你好世界</p>
</body>
</html>

效果说明：只有与第一个 <div> 同级且在其后的 <p> 元素（“开发者社区”、“技术分享”、“你好世界”）会被选中。嵌套在 <div> 内部的 <p> 不受影响，因为它不是该 <div> 的兄弟。

相邻兄弟选择器（`+`）

仅选取紧接在指定元素之后的第一个同级兄弟元素。

<!DOCTYPE html>
<html>
<head>
    <title>组合器示例</title>
    <style>
        div + p {
            color: #009900;
            font-size: 32px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div {
            text-align: center;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>相邻兄弟选择器示例</div>
    <p>开发者社区</p>
    <div>
        <div>子 div 内容</div>
        <p>内部段落</p>
    </div>
    <p>技术分享</p>
    <p>你好世界</p>
</body>
</html>

效果说明：只有紧跟在第一个 <div> 后面的那个 <p>（即“开发者社区”）被选中。“技术分享”虽然也是兄弟，但不相邻，因此不匹配。

子元素选择器（`>`）

仅选取指定元素的直接子元素，不包括更深层的后代。

<!DOCTYPE html>
<html>
<head>
    <title>组合器示例</title>
    <style>
        div > p {
            color: #009900;
            font-size: 32px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div {
            text-align: center;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>子元素选择器示例</div>
    <p>开发者社区</p>
    <div>
        <div>子 div 内容</div>
        <p>G4G</p>
    </div>
    <p>技术分享</p>
    <p>你好世界</p>
</body>
</html>

效果说明：只有作为 <div> 直接子节点的 <p> 会被选中。本例中，“G4G” 是内部 <div> 的直接子元素，因此匹配；而“开发者社区”、“技术分享”等虽在页面中，但并非任何 <div> 的直接子元素（它们是 body 的子元素），故不匹配。

后代选择器（空格）

选取指定元素内部任意层级的所有后代元素。

<!DOCTYPE html>
<html>
<head>
    <title>组合器示例</title>
    <style>
        div p {
            color: #009900;
            font-size: 32px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div {
            text-align: center;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>后代选择器示例</div>
    <p>开发者社区</p>
    <div>
        <div>子 div 内容</div>
        <p>G4G</p>
        <p>后代选择器测试</p>
    </div>
    <p>技术分享</p>
    <p>你好世界</p>
</body>
</html>

效果说明：所有位于任意 <div> 内部（无论嵌套多深）的 <p> 都会被选中。因此，“G4G” 和 “后代选择器测试” 均变为绿色加粗。注意：“开发者社区”等不在任何 <div> 内，故不受影响。

重点总结

组合器	符号	选取范围	精确度
后代选择器	空格	所有后代（任意深度）	较宽泛
子元素选择器	`>`	仅直接子元素	精确
相邻兄弟选择器	`+`	紧接其后的第一个同级兄弟	最精确
通用兄弟选择器	`~`	其后所有同级兄弟	中等

思考题

在以下 HTML 结构中，section p 和 section > p 分别会选中哪些元素？请列出具体标签。

<section>
  <p>第一段</p>
  <article>
    <p>第二段</p>
  </article>
  <p>第三段</p>
</section>

如何使用组合器为每个标题（<h2>）之后的第一个段落（<p>）添加特殊缩进？写出对应的 CSS 规则。
为什么在大型项目中推荐优先使用 > 而非空格后代选择器？从性能和可维护性角度分析。

源本科技 | 码上会