CSS 组合选择器

组合选择器 (Combinators) 通过组合多个简单选择器，根据它们在文档树中的特定关系来选择元素。这使得我们可以编写出更精确、更有针对性的 CSS 规则。

CSS 中有四种主要的组合选择器。

1. 后代选择器 (Descendant Selector) (空格)

后代选择器由一个空格 分隔，它会选择所有嵌套在指定祖先元素内部的后代元素，无论嵌套层级有多深。

语法: ancestor descendant

示例: div p 会选择所有 <div> 元素内部的 <p> 元素。

/* 选择所有在 div 元素内部的 p 元素 */
div p {
  color: red;
}

<div>
  <p>这个段落是红色的。</p>
  <section>
    <p>这个段落也是红色的，因为它也是 div 的后代。</p>
  </section>
</div>
<p>这个段落不是红色的。</p>

2. 子选择器 (Child Selector) (>)

子选择器由大于号 > 分隔，它只会选择作为指定父元素直接子代的元素。

语法: parent > child

示例: div > p 只会选择父元素是 <div> 的 <p> 元素。

/* 只选择作为 div 直接子元素的 p 元素 */
div > p {
  color: blue;
}

<div>
  <p>这个段落是蓝色的，因为它是 div 的直接子元素。</p>
  <section>
    <p>这个段落不是蓝色的，因为它不是 div 的直接子元素。</p>
  </section>
</div>

3. 相邻兄弟选择器 (Adjacent Sibling Selector) (+)

相邻兄弟选择器由加号 + 分隔，它会选择紧接在指定元素之后的第一个兄弟元素。这两个元素必须拥有相同的父元素。

语法: element + target

示例: h1 + p 会选择所有紧跟在 <h1> 元素后面的 <p> 元素。

/* 选择紧跟在 h1 后面的 p 元素 */
h1 + p {
  margin-top: 0;
  font-style: italic;
}

<main>
  <h1>一个标题</h1>
  <p>这个段落会应用样式。</p>
  <p>这个段落不会应用样式。</p>
  <div>
    <p>这个段落也不会应用样式，因为它不是 h1 的兄弟元素。</p>
  </div>
</main>

4. 通用兄弟选择器 (General Sibling Selector) (~)

通用兄弟选择器由波浪号 ~ 分隔，它会选择在指定元素之后的所有兄弟元素。这两个元素也必须拥有相同的父元素。

语法: element ~ target

示例: h1 ~ p 会选择所有在 <h1> 元素后面的、并且与 <h1> 有相同父元素的 <p> 元素。

/* 选择所有在 h1 之后的兄弟 p 元素 */
h1 ~ p {
  color: green;
}

<main>
  <h1>一个标题</h1>
  <div>这是一个 div</div>
  <p>这个段落是绿色的。</p>
  <p>这个段落也是绿色的。</p>
</main>

掌握这些组合选择器，可以让你避免创建不必要的 class 或 id，编写出更干净、更具语义化的 CSS。