CSS之后代、子代选择器的区别

后代、子代选择器的区别

子代选择器
后代选择器

子代选择器	后代选择器
子代选择器只选中父级元素的亲一代，父子级之间用大于号“>”连接	后代选择器选中的是指定元素的所有后代，父子级之间用空格连接

示例代码：
这里为了让大家好区分，我们这里给各个div标签设置了宽高和背景颜色属性值。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>子代和后代选择器的区别</title><style type="text/css">#div_11{background-color: #3A98FD;width: 300px;height: 300px}#div_12{background-color: #90EE90;width: 200px;height: 200px}#div_13{background-color: #FAEBD7;width: 100px;height: 100px;}#div_21{background-color: blueviolet;width: 200px;height: 200px;}/*子代选择器只选中父级元素的亲一代，父子级之间用大于号“>”连接,这里是将子代的文本颜色设置为红色。 */#div_11>#div_12{color: #FF0000;}/*  后代选择器选中的是指定元素的所有后代，父子级之间用空格连接, 这里是将子代的文本颜色设置为蓝色。*/#div_11 #div_13{color: blue;}</style></head><body><div id="div_11">这是第一个div<div id="div_12">这是第一个div的子代div<div id="div_13">这是第一个div的后代div</div></div></div><br><div id="div_21">这是第二个div </div></body>
</html>

页面效果

这里写的可能有点乱，而且只举了一种情况的例子。还有很多种情况。
大家自己多敲敲代码，多实验一下就会明白的，明白了之后才会灵活掌握和运用这些选择器。
今天的分享就到这里，有问题大家积极指正。

CSS之后代、子代选择器的区别相关推荐

html子代选择器,Css 后代选择器与子代选择器的区别
后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px solid red;} 但是,如果你仔细想想,这俩个概念是不 ...
html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是后代选择器与子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...
【温故知新】CSS学习笔记（后代和子代选择器）
后代和子代选择器 CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题. 1.后代选择器比如下面的例子,我们需要将所有的"Hello" ...
CSS的子选择器与后代选择器的区别
来源于:http://www.jianshu.com/p/599654ba5f4a 子选择器: 一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑 ...
[css] 为什么说css中能用子代选择器的时候不要用后代选择器？
[css] 为什么说css中能用子代选择器的时候不要用后代选择器? 选择从右到左依次解析匹配,所以后代选择器会去找它的所有父级, 而子代选择器只会选择直接的父级:减少匹配次数,提高效率个人简介我是 ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
【响应式Web前端设计】CSS后代选择器和子代选择器
文章目录子代选择器:>号后代选择器:空格文章目录子代选择器:>号后代选择器:空格子代选择器:>号 .father>div{border: 2px solid blu ...
css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).css语法(下图所示) 每个CSS ...
html的css样式中表示后代选择器,css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). css语法(下图所示) 每个CS ...

CSS之后代、子代选择器的区别

后代、子代选择器的区别

CSS之后代、子代选择器的区别相关推荐

最新文章

热门文章