子选择器（Child Selector）是CSS中的一种选择器，用于选择某个元素的直接子元素。它使用 > 符号来表示父元素与其直接子元素之间的关系。

语法

父元素 > 子元素 {
  样式规则
}

说明

  • 父元素：指定要选择的父元素。

  • 子元素：指定要选择的子元素，且必须是父元素的直接子元素。

  • >` 符号：表示子选择器，用于连接父元素和子元素。

示例

<div class="parent">
  <p>这是直接子元素</p>
  <span>这不是直接子元素</span>
  <div>
    <p>这是嵌套的子元素</p>
  </div>
</div>
.parent > p {
  color: red;
}

解释

  • 在上述HTML中，<div class="parent"> 是父元素。

  • 只有 <p>这是直接子元素</p> 是 .parent 的直接子元素。

  • parent > p 选择器会选中这个 <p> 元素，并将其文本颜色设置为红色。

  • <span> 和嵌套的 <p> 元素不会被选中，因为它们不是 .parent 的直接子元素。

结果

  • “这是直接子元素” 将显示为红色。

  • 其他元素不会受到影响。

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