css3 偽類選擇器使用

web前端同學都需要清楚偽類選擇器的使用。像:link,:visited,:hover,:active,:focus,:first-child,:lang大家已經很熟悉了，今天說說css3中新增的:nth-child()和:nth-of-type()。

:nth-child()用法

:nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。

1.具體的數字

:nth-child(n):匹配父元素中第n個元素，例：li:nth-child(3)

2.倍數

:nth-child(an):匹配父元素中第a數倍的元素，例:li:nth-child(2n)

3.倍數分組

:nth-child(an+b)或:nth-child(an-b):先對元素進行分組，每組有a個，b為組內成員的序號，其中字母n和加號+不可預設，位置不可調換，這是該寫法的標誌，其中a,b均為正整數或0。如3n+1、5n-1。

4.奇偶寫法

:nth-child(odd)和:nth-child(even):分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣；偶數(even)與(2n+0)及(2n)結果一樣。

:nth-of-type()的用法

:nth-of-type(n) 選擇器匹配屬於父元素的特定型別的第 n 個子元素的每個元素.這個的用法和:nth-child(n)的用法類似，不同的是:nth-child(n)所匹配的元素必須有父元素包著。但:nth-of-type(n)可以匹配特定型別元素行。

瀏覽器支援

所有主流瀏覽器均支援 :nth-child() 選擇器，除了 ie8 及更早的版本。