6. CSS 选择器（下）

本节目标：掌握四种组合器选择器，能根据元素之间的关系精准选中目标。

什么是组合器

组合器就是描述两个选择器之间「关系」的符号。通过组合器，你可以根据元素在 HTML 树中的位置关系来选中它们。

CSS 有四种组合器：

组合器	符号	名称
后代组合器	（空格）	Descendant
子代组合器	`>`	Child
相邻兄弟组合器	`+`	Adjacent sibling
通用兄弟组合器	`~`	General sibling

后代选择器（空格）

后代选择器用空格分隔两个选择器，选中所有后代，不管嵌套多深：

div p {
  color: red;
}

<div>
  <p>会被选中（div 的儿子）</p>
  <section>
    <p>也会被选中（div 的孙子）</p>
  </section>
</div>
<p>不会被选中（跟 div 没关系）</p>

只要 <p> 在 <div> 内部，不管隔了多少层都会被选中。

子选择器（>）

子选择器用 > 分隔，只选中直接子元素，不选孙子及更深层：

div > p {
  color: red;
}

<div>
  <p>会被选中（直接子元素）</p>
  <section>
    <p>不会被选中（是孙子，不是儿子）</p>
  </section>
</div>

Tip

后代选择器选所有子孙，子选择器只选儿子。根据需求选择合适的。

相邻兄弟选择器（+）

相邻兄弟选择器用 + 分隔，选中紧跟在后面的下一个兄弟元素：

div + p {
  color: red;
}

<div>这是 div</div>
<p>会被选中（紧跟 div 后面的第一个 p）</p>
<p>不会被选中（不是紧跟的那个）</p>

关键点：

两个元素必须有相同的父元素
只能选紧随其后的那一个
中间不能有其他元素隔开

通用兄弟选择器（~）

通用兄弟选择器用 ~ 分隔，选中后面所有同级的兄弟元素：

div ~ p {
  color: red;
}

<div>这是 div</div>
<h2>中间隔了个 h2</h2>
<p>会被选中</p>
<p>也会被选中</p>

跟相邻兄弟选择器的区别：+ 只选紧跟的那一个，~ 选后面所有的。

四种组合器对比

用同一个 HTML 结构来对比四种组合器的效果：

<div>
  <p>div 的子元素 p1</p>
  <section>
    <p>div 的孙子 p2</p>
  </section>
  <p>div 的子元素 p3</p>
</div>
<div>第二个 div</div>
<p>div 外的 p4</p>
<p>div 外的 p5</p>

选择器	选中的元素	说明
`div p`	p1, p2, p3	所有 div 后代中的 p
`div > p`	p1, p3	只选 div 的直接子元素 p
`div + p`	p4	紧跟第一个 div 后面的 p
`div ~ p`	p4, p5	第一个 div 后面所有的 p

组合器的实际用途

导航菜单样式：

/* 导航栏里的所有链接 */
.nav a {
  text-decoration: none;
}

/* 只选一级菜单项，不选下拉菜单里的 */
.nav > li {
  display: inline-block;
}

/* 当前选中项后面的兄弟项 */
.active ~ li {
  opacity: 0.7;
}

文章排版：

/* 文章里所有段落 */
article p {
  line-height: 1.8;
}

/* 紧跟标题后面的第一段 */
h2 + p {
  font-weight: bold;
  color: #555;
}

完整示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>组合器示例</title>
  <style>
    /* 后代选择器：container 内所有 p */
    .container p {
      color: #333;
    }

    /* 子选择器：只选直接子元素 */
    .container > p {
      font-weight: bold;
      border-left: 3px solid #3498db;
      padding-left: 10px;
    }

    /* 相邻兄弟选择器：紧跟 h2 的第一个 p */
    h2 + p {
      color: #e74c3c;
    }

    /* 通用兄弟选择器：h2 后面所有 p */
    h2 ~ p {
      font-style: italic;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>标题</h2>
    <p>紧跟 h2 的段落（红色+斜体+加粗）</p>
    <p>后面的段落（斜体+加粗）</p>
    <div class="inner">
      <p>内部段落（普通，不是直接子元素）</p>
    </div>
  </div>
</body>
</html>

学完这章你应该知道

后代选择器（空格）选所有子孙
子选择器（>）只选直接子元素
相邻兄弟选择器（+）选紧跟的下一个
通用兄弟选择器（~）选后面所有兄弟
组合器让你能根据元素关系精准选择

下一章学伪类选择器，可以根据元素状态来选中，比如 hover、focus 等。