css層次選擇器的理解
（1）語法：h1 em {color:red;} 表示的是從h1開始裡面包含的所有的em元素變成紅色，若em元素中還有其他元素，也會被選擇。h1為祖先，其他的em都是後代，即選中後代，不管是兒子還是孫子，只要是都會被選中，為後代選擇器。
（2）語法：h1>em{color:red;} 僅僅選擇直接子元素em，子元素中若有其他元素，則不再選擇
2.prev+next（前+後）選擇器，如li+p{}，則選擇緊跟在li元素後面的所有p元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li+li{color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
例子中的選擇器可以選擇緊接在第一個li後面的兩個li，執行結果
這個例子可以可能有點迷惑性，使用了li+li
把程式碼改變一下，
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li+p{color:red;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<p>4654165146</p>
<em>List item 2</em>
<p>5465465656</p>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
這樣寫，有更加深刻的理解
執行結果，如圖
3.prev~siblings(前~兄弟)選擇器
該選擇器可以選取指定的prev元素後面根據siblings過濾的元素。例如，使用#prev~div可以選取所有（指在同一個巢狀中的）在id為prev的元素後面的div元素
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li~p{color:red;}
</style>
</head>
<body>
<div>
<ul>
<p>456465465</p>
<li>List item 1</li>
<p>4654165146</p>
<em>List item 2</em>
<p>5465465656</p>
<li>List item 3</li>
</ul>
<p>54654654654685465</p>
</div>
</body>
</html>
執行結果：