CSS 组合选择器

组合选择器（Combinators）将两个或更多选择器连接在一起，指定元素之间的关系。CSS 提供了四种组合方式。

后代选择器（Descendant Combinator）A B

用空格连接，选中 A 内部的所有后代 B（无论嵌套多深）：

css 
/* 选中 article 内部的所有 p 元素 */
article p {
  line-height: 1.8;
}

/* 选中 nav 内部的所有 a 元素 */
nav a {
  text-decoration: none;
}
html 
<article>
  <p>直接子元素 — 会被选中</p>
  <div>
    <p>深层嵌套 — 也会被选中</p>
  </div>
</article>

子代选择器（Child Combinator）A > B

用 > 连接，只选中 A 的直接子元素 B：

css 
/* 只选中 article 的直接子 p，不包括深层嵌套的 p */
article > p {
  font-size: 1.1rem;
}

/* 只选中 ul 的直接子 li，不包括嵌套 ul 中的 li */
ul > li {
  margin-bottom: 0.5rem;
}
html 
<article>
  <p>直接子元素 — 会被选中 ✓</p>
  <div>
    <p>深层嵌套 — 不会被选中 ✗</p>
  </div>
</article>

相邻兄弟选择器（Adjacent Sibling Combinator）A + B

用 + 连接，选中紧跟在 A 之后的那个兄弟 B：

css 
/* 选中紧跟在 h2 后面的第一个 p */
h2 + p {
  margin-top: 0;
  font-weight: 500;
}

/* 选中紧跟在 label 后面的 input */
label + input {
  margin-left: 0.5rem;
}
html 
<h2>标题</h2>
<p>紧跟在标题后 — 会被选中 ✓</p>
<p>第二个段落 — 不会被选中 ✗</p>

通用兄弟选择器（General Sibling Combinator）A ~ B

用 ~ 连接，选中 A 后面的所有兄弟 B：

css 
/* 选中 h2 后面所有的 p 兄弟 */
h2 ~ p {
  color: #475569;
}

/* 选中 .error 后面所有的 .hint */
.error ~ .hint {
  display: block;
}
html 
<h2>标题</h2>
<p>第一个 — 会被选中 ✓</p>
<p>第二个 — 也会被选中 ✓</p>
<p>第三个 — 也会被选中 ✓</p>

四种组合器对比

语法名称关系示例
A B后代A 内部所有 B（不限深度）nav a
A > B子代A 的直接子元素 Bul > li
A + B相邻兄弟紧跟在 A 后的 Bh2 + p
A ~ B通用兄弟A 后面的所有兄弟 Bh2 ~ p

组合使用

组合选择器可以混合使用：

css 
/* article 内部，紧跟在 h2 后的 p */
article h2 + p {
  font-style: italic;
}

/* main 的直接子 section 内的所有 a */
main > section a {
  color: #2563eb;
}

/* nav 中紧跟在 logo 后的 menu */
nav .logo + .menu {
  border-left: 1px solid #e2e8f0;
}
html 
<article>
  <h2>文章标题</h2>
  <p>紧跟在 h2 后的段落（斜体）</p>
</article>

<main>
  <section>
    <a href="#">section 内的链接</a>
  </section>
</main>

<nav>
  <div class="logo">Logo</div>
  <div class="menu">菜单项</div>
</nav>