CSS3選取器之學習筆記，css3選取器

CSS3選取器之學習筆記，css3選取器

首先說first-child與last-child，這兩個選取器很容易明白，就是父元素下的第一個子項目和最後一個子項目。而nth-child和nth-last-child則是父元素下指定序號的子項目，甚至第偶數個、奇數個子項目精選樣式的制定。

/*選取器寫法樣本*/

nth-child(n) //正數第n個子項目
nth-last-child(n) //倒數第n個子項目
nth-child(odd) //正數下來所有的第偶數個子項目
nth-last-child(even) //倒數上去的第奇數個子項目

那麼nth-of-type與nth-last-of-type呢？

在一個div中有數篇文章，h2與p多次使用的情況要對h2實現奇偶異色，如果使用nth-child或是nth-last-child來實現就會發現一些問題(不提供demo代碼，讀者可自行編寫h2ph2ph2p如此)，實驗的結果是沒有出現奇偶異色，僅僅是奇數的變色了。

這個問題產生的原因是，nth-child選取器在計運算元元素是第奇數個元素還是第偶數個元素的時候，是連同父元素中的所有子項目一起計算的。換句話說，”h2:nth-child(odd)”這句話的含義，並不是指“針對div元素中第奇數個h2子項目來使用”，而是指“當div元素中的第奇數個子項目是h2子項目的時候使用。”(demo的話h2,p相互交錯，h2都在奇數位置。)

nth-of-type與nth-last-of-type可以避免這類問題的發生。使用這兩個選取器的時候，CSS3在計運算元元素是第奇數個子項目還是第偶數個子項目的時候，就只針對同類型的子項目進行計算了。

/*選取器寫法樣本*/

h2:nth-of-type(odd) //第偶數個h2子項目
h2:nth-of-type(even) //第奇數個h2子項目

新增結構偽類別選取器列表：

　　E:root：匹配E所在文檔的根項目

　　E:nth-child(n)：匹配元素類型為E且是父元素的第n個子項目

　　E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數第n個子項目（與上一項順序相反）

　　E:nth-of-type(n)：匹配父元素的第n個類型為E的子項目

　　E:nth-last-of-type(n)：匹配父元素的倒數第n個類型為E的子項目（與上一項順序相反）

　　E:first-of-type：匹配父元素的第一個類型為E的子項目

　　E:last-child：匹配元素類型為E且是父元素的最後一個子項目

　　E:last-of-type：匹配父元素的最後一個類型為E的子項目

　　E:only-child：匹配元素類型為E且是父元素中唯一的子項目

　　E:only-of-type：匹配父元素中唯一子項目是E的子項目

　　E:empty：匹配不包含子節點(包括文本)的E元素

來自:http://www.111cn.net/cssdiv/css/47214.htm