【响应式Web前端设计】CSS后代选择器和子代选择器

向右看齐 2022-11-14 00:51 120阅读 0赞

### 文章目录 ###

*  子代选择器：>号
 *  后代选择器：空格

### 文章目录 ###

*  子代选择器：>号
 *  后代选择器：空格

# 子代选择器：>号 #

.father>div{ 
            border: 2px solid blue; 
                                               }`

# 后代选择器：空格 #

.father div{ 
            border: 2px solid pink;
        }

后代，顾名思义，子孙后代，不仅包括子还包括孙，曾孙，曾曾孙，只在在父里面的，都能管到。

子代，就只是儿子辈了，再往下的就管不了了。

![在这里插入图片描述][20210327210911730.png]

举个上面的例子。

首先是后代选择：.the-demo li

![在这里插入图片描述][20210327210948746.png]

![在这里插入图片描述][20210327211001472.png]  
子代选择：.the-demo>li

![在这里插入图片描述][20210327211026946.png]

![在这里插入图片描述][20210327211032607.png]  
可以看到，孙辈的没有边框。子代选择只能一层一层的往下，孙1的子代选择：.the-demo>li>ul>li

[20210327210911730.png]: /images/20221022/e5b0c601c27b48ceb4c9aa8974040bd6.png
[20210327210948746.png]: https://img-blog.csdnimg.cn/20210327210948746.png
[20210327211001472.png]: https://img-blog.csdnimg.cn/20210327211001472.png
[20210327211026946.png]: https://img-blog.csdnimg.cn/20210327211026946.png
[20210327211032607.png]: https://img-blog.csdnimg.cn/20210327211032607.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css3后代选择器和子代选择器的区别及优先级

css3后代选择器和子代选择器的区别及优先级 1. 子代选择器：>号 .father>div{ border: 2px solid...

我不是女神ヾ/ 2024年04月17日 05:59/ 0 赞/ 9 阅读

相关【前端_层次选择器】子代选择器、后代选择器、兄弟选择器、相邻选择器

[CSDN话题挑战赛第2期][CSDN_2] 参赛话题：[学习笔记][Link 1] 学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记

太过爱你忘了你带给我的痛/ 2024年04月06日 13:41/ 0 赞/ 18 阅读

相关 CSS-包含选择器、后代选择器

说明： 1.包含选择器也可以叫做后代选择器。利用父子级关系进行选择. 2.父子级关系,从父级到子级的顺序，用空格分隔 <html> <he

我不是女神ヾ/ 2023年07月01日 06:24/ 0 赞/ 73 阅读

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

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

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

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

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

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

相关【响应式Web前端设计】CSS后代选择器和子代选择器

文章目录子代选择器：>号后代选择器：空格文章目录子代选择器：>号后代选择器：空格子代选择器：>号 .

向右看齐/ 2022年11月14日 00:51/ 0 赞/ 121 阅读

相关【响应式Web前端设计】CSS3 :nth-of-type() 选择器

<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) { b

浅浅的花香味﹌/ 2022年10月06日 05:51/ 0 赞/ 120 阅读

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

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

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

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

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

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

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

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

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