首先說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-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元素
來自:
css3學習筆記 css3選擇器
e attr 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 css ul,li lihtml class linksitem id...
CSS3學習筆記 選擇器
css3 選擇器 1.1屬性選擇器 e attr value 指定屬性名，找到以value開頭的屬性值 e attr value 指定屬性名，找到以value結尾的屬性值 e attr value 指定屬性名，找到包含value開頭的屬性值 1.2為類選擇器 1.2.1 使用者介面相關的 e ena...
CSS3學習筆記 選擇器
類選擇器 class classname classname 選取class為classname的元素 p.chassname 選取p標籤中class為classname的元素 classname1.classname2 選取同時擁有.classname1和.classname2的元素 id選擇器 ...