层次/关系选择器详细说明以及案例

层次/关系选择器用于在HTML文档中选择具有特定关系的元素。常见的层次/关系选择器包括：

1. 后代选择器 (空格)

• 作用：选择指定元素的所有后代元素。

• 语法：A B

• 示例：

  <div class="container">
      <p>段落1</p>
      <span>文本1</span>
      <div>
          <p>段落2</p>
      </div>
  </div>

  .container p {
      color: red;
  }

  解释：选择.container内所有的<p>元素，包括嵌套的<p>。

2. 子元素选择器 (>)

• 作用：选择指定元素的直接子元素。

• 语法：A > B

• 示例：

  <div class="container">
      <p>段落1</p>
      <span>文本1</span>
      <div>
          <p>段落2</p>
      </div>
  </div>

  .container > p {
      color: blue;
  }

  解释：只选择.container的直接子元素<p>，不选择嵌套的<p>。

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

• 作用：选择紧接在指定元素后的相邻兄弟元素。

• 语法：A + B

• 示例：

  <p>段落1</p>
  <p>段落2</p>
  <span>文本1</span>

  p + p {
      color: green;
  }

  解释：选择紧接在<p>后的下一个<p>元素。

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

• 作用：选择指定元素后的所有兄弟元素。

• 语法：A ~ B

• 示例：

  <p>段落1</p>
  <span>文本1</span>
  <p>段落2</p>
  <span>文本2</span>

  p ~ span {
      color: purple;
  }

  解释：选择所有在<p>后的<span>元素。

总结：

• 后代选择器：选择所有后代元素。

• 子元素选择器：选择直接子元素。

• 相邻兄弟选择器：选择紧接的相邻兄弟元素。

• 通用兄弟选择器：选择所有后续兄弟元素。

本篇文章内容来源于：层次/关系选择器详细说明以及案例