CSS的子选择器与后代选择的区别

川长思鸟来 2022-05-27 05:45 253阅读 0赞

# 一、子选择器 #

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/

<h1>食物</h1>  
    <ul class="food">  
        <li>水果  
            <ul>  
                <li>香蕉</li>  
                <li>苹果</li>  
                <li>梨</li>  
            </ul>  
        </li>  
        <li>蔬菜  
            <ul>  
                <li>白菜</li>  
                <li>油菜</li>  
                <li>卷心菜</li>  
            </ul>  
        </li>  
    </ul>

![Center][]

# 二、包含（后代）选择器 #

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

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

举例：

.food li \{border:1px solid red;/\*添加边框样式（粗细为1px， 颜色为红色的实线）\*/\}

<ul class="food">  
        <li>水果  
            <ul>  
                <li>香蕉</li>  
                <li>苹果</li>  
                <li>梨</li>  
            </ul>  
        </li>  
        <li>蔬菜  
            <ul>  
                <li>白菜</li>  
                <li>油菜</li>  
                <li>卷心菜</li>  
            </ul>  
        </li>  
    </ul>

![Center 1][]

[Center]: /images/20220527/787bf60a537244baa1f8bf18996b8b4c.png
[Center 1]: /images/20220527/9e2d3c17462c4b9c83205a27566ebbe9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关复合选择器-后代选择器（HTML、CSS）

复合选择器-后代选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

左手的ㄟ右手/ 2023年10月03日 12:49/ 0 赞/ 21 阅读

相关 CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~

群组选择器（','） / 表示既h1，又h2 / h1, h2 { color: red; } 后代选择器\[空格\]

╰半橙微兮°/ 2022年12月19日 08:52/ 0 赞/ 275 阅读

相关复合选择器——后代选择器，子选择器，并集选择器和伪类选择器

复合选择器复合选择器——后代选择器，子选择器，并集选择器和伪类选择器复合选择器是简历在基础选择器之上的，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目

╰+攻爆jí腚メ/ 2022年12月17日 04:27/ 0 赞/ 208 阅读

相关 css后代选择器:nth_CSS选择器：特异性

css后代选择器:nth ![cssmasterthumb][] The following is an extract from our book, [CSS Maste

青旅半醒/ 2022年12月03日 09:55/ 0 赞/ 247 阅读

相关 CSS的复合选择器（后代选择器、子选择器、并集选择器、伪类选择器、链接伪类选择器、:focus伪类选择器）

文章目录 1 什么是复合选择器 2 后代选择器 3 子选择器 4 并集选择器 5 伪类选择器 6 链接伪类选择器 7 :focu

末蓝、/ 2022年11月17日 14:58/ 0 赞/ 305 阅读

相关 CSS选择器中后代选择器和派生选择器有什么区别？

根据W3C的说明：派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上

绝地灬酷狼/ 2022年06月10日 14:00/ 0 赞/ 260 阅读

相关 CSS的子选择器与后代选择的区别

一、子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。这行代码会使class名为food下的子元素li（水果、蔬菜）加

川长思鸟来/ 2022年05月27日 05:45/ 0 赞/ 254 阅读

相关子代选择器和后代选择器

在CSS3中，我们会遇到这个一个问题，当层级过多的时候，我们想对其中的某些标签进行操作，有时候我们又想只对某一层级的标签进行操作，这个时候就涉及到字标签和后代标签的问题

落日映苍穹つ/ 2022年05月18日 09:43/ 0 赞/ 254 阅读

相关 CSS的后代选择器和子代选择器的区别

1.后代选择器：写法：$(“ancestor descendant” ，标签之间用空格隔开例在的代码中写： <div> <p> <span>

桃扇骨/ 2022年03月14日 11:50/ 0 赞/ 265 阅读

相关 jQuery中的后代选择器和孩子选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

冷不防/ 2021年09月18日 22:50/ 0 赞/ 581 阅读