后代选择器用于选择某个元素的后代元素，通过空格分隔两个选择器。格式为 A B，其中 A 是祖先元素，B 是后代元素。

示例

<div class="container">
  <p>这是一个段落。</p>
  <span>这是一个span。</span>
  <div>
    <p>这是嵌套的段落。</p>
  </div>
</div>
.container p {
  color: red;
}

解释

  • .container p 选择所有在 .container 元素内的 <p> 元素，无论嵌套层级。

  • 因此，<p>这是一个段落。</p> 和 <p>这是嵌套的段落。</p> 都会应用 color: red; 样式。

结果

  • 页面中所有在 .container 内的 <p> 元素文本颜色变为红色。

本篇文章内容来源于：后代选择器详细说明以及案例