层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某种关系可以方便快捷地选定需要的元素。
层次选择器语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E F | 后代选择器（包含选择器） | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>f | 子选择器 | 选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相邻兄弟选择器 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
实战体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
*{margin: 0;padding: 0; }
body{width: 300px; margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>10</div>
</div>
</div>
</body>
</html>```
为了更好的李青这些div的层次关系，可以先将示例中的body部分画一个DOM树形草图
####3、1 后代选择器
后代选择器后代选择器（E F）也称为包含选择器，作用就是可以选择元素的后代元素。例如“E F”,E为祖先元素，F为后代元素，表带的意思就是选择E元素的所有后代F元素。
```css
*{margin: 0;padding: 0; }
body{width: 300px; margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;} //使用后代选择器来改变其背景色```
####3、2 子选择器
子选择器(E>F)只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F表示选择了E元素下的 所有子元素F。
```css
*{margin: 0;padding: 0; }
body{width: 300px; margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body>div {background:green;}//div5、div6、div8、div9、div10不属于body的子元素，所以不会变成绿色```
####3、3 相邻兄弟链接器
相邻兄弟选择器（E+F）可以选择紧接在另外一个元素后的元素，他们具有一个相同的父元素。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3层次选择器</title>
<style type="text/css">
*{margin: 0;padding: 0; }
body{width: 300px; margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body>div {background:green;}
.active+div{background:lime;}
</style>
</head>
<body>
<div class="active">1</div>
<!--为了说明相邻兄弟选择器，在此处添加一个类名active -->
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>10</div>
</div>
</div>
</body>
</html>//此时第二个div的背景色将变成“lime”色```
####3、4 通用兄弟选择器
通用兄弟选择器（E~F）是**CSS3新增加**的，用于选择某元素后面的所有兄弟元素，它们和相邻兄弟选择器类似，需要在同一个父元素之间。
```css
*{margin: 0;padding: 0; }
body{width: 300px; margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}
body>div {background:green;}
.active+div{background:lime;}
.active~div{background:red;}```
网友评论