CSS3選擇器分類

本文列舉常用的幾種選擇器

一、層級選擇器

E>F
子選擇器
選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素

div>em{ color: red; }

HTML程式碼：
<div>
     <h3>我是標題</h3>
     <p>我第1個是p標籤</p>
     <em>我第1個是em標籤</em>
     <span>我是小標題</span>
     <em>我第2個是em標籤</em>
     <em
 
>我第3個是em標籤</em>
</div>

效果如下：

E+F
相鄰兄弟選擇器
選擇匹配的F元素，且匹配的F元素緊位於匹配的E元素的後面

div+p{ color: blue; }

HTML程式碼：
<div>
     <h3>我是標題</h3>
     <p>我第1個是p標籤</p>
     <em>我第1個是em標籤</em>
</div>
<p>我就是緊貼在div元素後面的第一個p元素</p>
<p>我就是緊貼在div元素後面的第二個p元素</p
 
>

效果如下：

E~F
通用選擇器
選擇匹配的F元素，且位於匹配的E元素後的所有匹配的F元素

div~p{ color:blue;}

HTML程式碼：
<div>
     <h3>我是標題</h3>
     <p>我第1個是p標籤</p>
     <em>我第1個是em標籤</em>
</div>
<p>我就是緊貼在div元素後面的第一個p元素</p>
<p>我就是緊貼在div元素後面的第二個p元素</p>

效果如下：

二結構性偽類選擇器

X:first-child 匹配子集的第一個元素。IE7就可以支援
X:last-child匹配父元素中最後一個X元素
X:nth-child(n)用於匹配索引值為n的子元素。索引值從1開始
X:only-child這個偽類一般用的比較少，比如上述程式碼匹配的是div下的有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。
X:nth-last-child(n)從最後一個開始算索引。

X:first-of-type匹配同級兄弟元素中的第一個X元素
X:last-of-type匹配同級兄弟元素中的最後一個X元素
X:nth-of-type(n)匹配同類型中的第n個同級兄弟元素X
X:only-of-type匹配屬於同類型中唯一兄弟元素的X
X:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素

:root匹配文件的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTML
X:empty{}匹配沒有任何子元素（包括包含文字）的元素X