的子级元素，当然这种父子结构还有跟多。
兄弟之间的关系：在上述代码代码中，
祖先与后代之间的关系：在上述代码代码中，
层级选择器种类
根据HTML元素之间的3种关系，CSS的层级选择器提供了如下4种用法：
后代选择器：将某个元素当做祖先元素，定位该元素的所有后代元素。
子级选择器：将某个元素当做父级元素，定位该元素的所有子级元素。
相邻兄弟选择器：将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素
普通兄弟选择器：是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。
选择符
CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示
表示后代关系的空格（ ）
表示父子关系的尖括号（>）
表示相邻兄弟关系的加号（+）
表示兄弟关系的波浪号（~）
在Web开发中，用的较多的是前两个-后代选择器和子选择器。
我们先来看一段代码：
使用CSS3层次选择器
* {margin:0;padding:0;}
body {width: 300px; margin:0 auto;}
div{margin:5px;padding:5px;border:1px solid #ccc;}
1
2
3
后代选择器
用来选择某个元素的所有的后代元素，比如上面的html中，使用如下的样式，会产生什么效果呢？
body div { background-color: yellow; }这里将body元素的后代div元素设置背景色为yellow。也就是说，所有的div都被染上了黄色。
子选择器
用于选择某个元素下（可能是多个元素）所有的一级子元素。比如，我们使用下面的选择器及样式，会有什么效果呢？
body > div { background-color: red; }这样设置后，body下的一级div元素，这里是内容为1、2、3、4、7的div元素设置背景色为红色。
相邻兄弟选择器
用于选取某个（或某些）元素同级目录下的下一个元素。比如，这里我们使用下面样式设置后的效果是什么样的呢？
.active + div { background-color: green; }这里我们设置了.active选择器的相邻兄弟节点，也就是第二个div元素，将其背景色设置为了绿色。
通用兄弟选择器
用于选取某个（或某些）元素的同级目录下所有的后面的标记。它和相邻兄弟选择器类似，需要在同一个父元素中。
比如使用下面的代码，影响到的样式：
.active ~ div { background-color: pink; }这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。
关于“CSS中的层级选择器如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
网页标题：CSS中的层级选择器如何使用
当前URL：
http://cdkjz.cn/article/gocgso.html
