層次選擇器通過HTML的DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰兄弟和通用兄弟幾種關(guān)系最疆，通過其中某種關(guān)系可以方便快捷地選定需要的元素。
層次選擇器語法
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| E F | 后代選擇器（包含選擇器） | 選擇匹配的F元素蚤告，且匹配的F元素被包含在匹配的E元素內(nèi) |
| E>f | 子選擇器 | 選擇匹配的F元素努酸，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素后面 |
| E~F | 通用選擇器 | 選擇匹配的F元素罩缴，且位于匹配的E元素后的所有匹配的F元素 |
實(shí)戰(zhàn)體驗(yàn)
<!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的層次關(guān)系，可以先將示例中的body部分畫一個(gè)DOM樹形草圖
####3烙荷、1 后代選擇器
后代選擇器后代選擇器（E F）也稱為包含選擇器檬寂，作用就是可以選擇元素的后代元素。例如“E F”,E為祖先元素昼伴，F(xiàn)為后代元素圃郊，表帶的意思就是選擇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的子元素，所以不會(huì)變成綠色```
####3孤荣、3 相鄰兄弟鏈接器
相鄰兄弟選擇器（E+F）可以選擇緊接在另外一個(gè)元素后的元素，他們具有一個(gè)相同的父元素须揣。
```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>
<!--為了說明相鄰兄弟選擇器盐股，在此處添加一個(gè)類名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>//此時(shí)第二個(gè)div的背景色將變成“l(fā)ime”色```
####3、4 通用兄弟選擇器
通用兄弟選擇器（E~F）是**CSS3新增加**的耻卡，用于選擇某元素后面的所有兄弟元素疯汁，它們和相鄰兄弟選擇器類似卵酪，需要在同一個(gè)父元素之間幌蚊。
```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;}```
