1

后代选择器 (空格)

大白话解释： 选择指定元素的所有后代元素（子孙元素），不管嵌套多少层。

/* 语法：祖先 后代 { 样式 } */
div p { color: blue; }

例子：

选择所有在<div>内部的<p>元素（不管嵌套多少层）

<div>
  <p>这个文字会变蓝色（直接子元素）</p>
  <section>
    <p>这个文字也会变蓝色（孙元素）</p>
  </section>
</div>

💡 注意：空格选择器会选择所有后代，无论嵌套多深。

2

子元素选择器 (>)

大白话解释： 只选择指定元素的直接子元素（第一层子元素），不会选择更深层的后代。

/* 语法：父元素 > 子元素 { 样式 } */
div > p { color: red; }

例子：

只选择<div>的直接子元素<p>，不选择更深层的p元素

<div>
  <p>这个文字会变红色（直接子元素）</p>
  <section>
    <p>这个文字不会变红色（孙元素）</p>
  </section>
</div>

💡 注意：大于号选择器只选择直接子元素，不选择更深层的后代。

3

相邻兄弟选择器 (+)

大白话解释： 选择紧接在另一元素后的元素，而且二个元素有相同的父元素（同一级别的兄弟元素）。

/* 语法：元素1 + 元素2 { 样式 } */
h2 + p { font-weight: bold; }

例子：

选择紧跟在<h2>后面的第一个<p>元素

<div>
  <h2>标题</h2>
  <p>这个段落会加粗（紧跟在h2后面）</p>
  <p>这个段落不会加粗（第二个p）</p>
  <h2>另一个标题</h2>
  <p>这个段落也会加粗</p>
</div>

💡 注意：加号选择器只选择一个元素，而且是紧跟在指定元素后面的第一个兄弟元素。

4

通用兄弟选择器 (~)

大白话解释： 选择指定元素后面的所有兄弟元素（同一父元素下的所有后续兄弟）。

/* 语法：元素1 ~ 元素2 { 样式 } */
h2 ~ p { color: green; }

例子：

选择同一个父元素中<h2>后面的所有<p>元素

<div>
  <h2>标题</h2>
  <p>这个文字变绿色</p>
  <p>这个文字也变绿色</p>
  <div>其他内容</div>
  <p>这个文字还是变绿色</p>
</div>

💡 注意：波浪号选择器会选择指定元素后面的所有同级兄弟元素，不管中间是否有其他元素。

💡

组合选择器使用技巧

  • 多层组合使用： 可以组合多种选择符实现精确选择，如 div.content > p.intro + p
  • 提高样式优先级： 组合选择器比单个选择器具有更高的优先级
  • 避免过度使用： 过于复杂的选择器可能导致维护困难
  • 浏览器支持： 组合选择器在所有现代浏览器中都得到良好支持
  • 性能考虑： 后代选择器（空格）比子选择器（>）性能稍差，因为需要检查更多元素

组合选择器对比表

选择器 符号 选择范围 层级深度 示例
后代选择器 空格 所有后代元素 不限 div p
子元素选择器 > 直接子元素 仅一级 div > p
相邻兄弟选择器 + 紧随其后的第一个兄弟 同一层级 h2 + p
通用兄弟选择器 ~ 后面所有兄弟 同一层级 h2 ~ p