CSS子类选择器和后代选择器的区别

最新推荐文章于 2025-06-25 15:41:32 发布

Candy_Sir

最新推荐文章于 2025-06-25 15:41:32 发布

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 子类选择器后代选择器

本文链接：https://blog.youkuaiyun.com/Candy_Sir/article/details/81538017

css 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例对比了子类选择器与后代选择器在网页元素选择上的不同应用方式。子类选择器只作用于直接子元素，而后代选择器可以作用于所有后代元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.介绍

1.子类选择器

子类选择器仅仅指的是父元素的直接后代，大家可以理解为仅作用于第一代子元素，通过“>”进行选择。

2.后代选择器

后代选择器则指的是作用于所有后代元素，通过空格来进行选择。

话不多说，接下来通过代码给大家演示。

二.举例

<ul class="clothes">
        <li>衣服
            <ul>
                <li>T恤</li>
                <li>衬衣</li>
                <li>短袖</li>
            </ul>
        </li>
        <br>
        <li>裤子
            <ul>
                <li>牛仔裤</li>
                <li>休闲裤</li>
                <li>七分裤</li>
            </ul>
        </li>
    </ul>

这是没有任何样式的，我们在浏览器中显示如下：
这里写图片描述

接下来我们使用子类选择器”.clothes>li”表示给class为clothes的子类li(第一代子类)添加一个红色边框。

    <script>
       $(function () {
          $(".clothes>li").css("border","1px solid red");
       });
    </script>

浏览器显示效果如下图所示：
这里写图片描述

我们可以看到只有第一代子类为li（衣服、裤子）的加上了红色边框，而其他的如T恤、牛仔裤等等并没有任何样式。

接下来我们换用后代选择器”.clothes li”表示给class为clothes所有后代为li的子类添加一个红色边框。

    <script>
        $(function () {
           $(".clothes li").css("border","1px solid red");
        });
    </script>

浏览器显示效果如下图所示：
这里写图片描述

我们可以看到所有后代为li的元素都加上了红色边框，不仅仅是第一代子元素了。

三.总结

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。