css子元素选择器与直接子元素区别-css教程-PHP中文网

css子元素选择器与直接子元素区别

P粉602998670

发布： 2025-09-26 14:39:01

原创

591人浏览过

直接子元素选择器（>）仅选中父元素的直接子元素，如.nav > li只作用于第一层li；后代选择器（空格）则选中所有层级的后代元素，如.parent .child会匹配任意深度的.child。

css子元素选择器与直接子元素区别

子元素选择器和直接子元素选择器在CSS中用于选取不同层级的子元素，它们的关键区别在于匹配的范围不同。

直接子元素选择器（>）

使用 > 符号，只选择父元素的直接子元素，也就是嵌套层级为一级的子元素。

例如：

.parent > .child { color: red; }

这条规则只会选中 直接位于 .parent 内部的 .child 元素，如果 .child 嵌套在 .parent 的某个中间元素里，就不会被选中。

立即学习“前端免费学习笔记（深入）”；

HTML结构示例：

    <div class="parent"><br>
      <div class="child">会被选中</div><br>
      <div><br>
        <div class="child">不会被选中</div><br>
      </div><br>
    </div>

登录后复制

后代子元素选择器（空格）

使用空格分隔，选择符会匹配父元素内部所有层级的对应子元素，不管嵌套多深。

例如：

.parent .child { color: blue; }

这条规则会选中 .parent 内部任何层级的 .child 元素，包括孙子、曾孙等。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

同样的HTML结构：

    <div class="parent"><br>
      <div class="child">会被选中</div><br>
      <div><br>
        <div class="child">也会被选中</div><br>
      </div><br>
    </div>

登录后复制