本教程操作环境：windows10系统、css3&&html5版本、dell g3电脑。
css3层次选择器的用法是什么层次选择器通过html的dom元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。层次选择器语法如下：
选择器 类型 功能描述
e f 后代选择器（包含选择器） 选择匹配的f元素，且匹配的f元素被包含在匹配的e元素内
e > f 子选择器 选择匹配的f元素，且匹配的f元素师所匹配的e元素的子元素
e + f 相邻兄弟选择器 选择匹配的f元素，且匹配的f元素紧位于匹配的e元素后面
e ~ f 通用选择器 选择匹配的f元素，且位于匹配的e元素后的所有匹配的f元素
ie7以及以上版本的浏览器包括其他各类浏览器都支持层次选择器。（ie6不支持）
下面通过一个html文件说明各类层次选择器的使用方式：
<!doctype html><html lang="en-us"> <head> <meta charset="utf-8"> <title>使用css3层次选择器</title> <style type="text/css"> * {margin: 0; padding: 0} body {width: 300px; margin: 0 auto;} p {margin: 5px;padding: 5px;border: 1px solid #ccc;} </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <p>4 <p>5</p> <p>6</p> </p> <p>7 <p>8 <p>9 <p>10</p> </p> </p> </p> </body></html>
显示效果如下：
其dom树结构如下：
后代选择器：
后代选择器（e f）也称为包含选择器，作用就是可以选择某元素的后代元素。例如“e f”， e为祖先元素，f为后代元素，表达的意思就是e元素的所有后代f元素，这里的f元素不管是e的子元素，孙辈元素，或者更深层次的关系，都将被选中。
换句话说，不管f在e中有多少层级关系，f元素都将被选中。
下面使用后代选择器改变其背景颜色，在上述html元素css代码的最后增加如下样式：
p p {background: orange}
显示效果如下：
子选择器：
子选择器智能选择某元素的子元素，其中e为父元素，而f为子元素，其中e>f表示选择了e元素下所有子元素f。这与后代选择器不一样，后代选择器中，f是e的后代，而在e>f中f仅仅是e的子元素而已。
下面代码用来改变body下的子元素p的背景色：
body > p {background:green;}
显示效果如下：
相邻兄弟选择器：
相邻兄弟选择器可以选择紧邻在另一个元素后面的元素，它们具有一个相同的父元素。换句话说e和f是同辈元素，f元素在e元素后面，并且相邻。
下面代码用来改变class为active的p元素的相邻兄弟元素背景颜色，为了方便起见，为上述html元素的第一个p元素增加class属性，如下：
<p class="active">1</p>
然后在其css代码最后增加如下样式：
.active + p {background:lime}
显示效果如下：
通用兄弟选择器：
用于选择某元素后面的所有兄弟元素，它们和相邻兄弟元素选择器类似，需要在同一个父元素之中，也就是说e元素和f元素是同辈元素，并且f元素在e元素之后。
在上述html的css代码最后增加如下样式：
.active ~ p {background:red;}
显示效果如下：
（学习视频分享：css视频教程）
以上就是css3层次选择器的用法是什么的详细内容。