CSS3 的:nth-child(n)

 nth-child是CSS新增的偽類選擇器(不寫在html裡，而是寫在CSS)，標準的語法是:nth-child(n)，括弧中的n可以是奇數「odd」，或是偶數「even」，也可以自訂數列應用。此功能能夠有效減少多餘的class與id，十分方便，應用上也非常彈性與廣泛。

1. :nth-child(odd)選取奇數

ex:

.list_1 li:nth-child(odd){ background:#311D1E; color:#fff;}

設定只選取列表中的奇數項目。因此位於第一與第三列的001與003會被選取。

2. :nth-child(even)選取偶數

ex:

.list_2 li:nth-child(even){ background:#4E5996; color:#fff;}

同理，even設定偶數，所以位於偶數列的項目會被選取。

3. :nth-child(n)選取特定的數字

ex:

.list_4 li:nth-child(5){ background:#61AA72; color:#fff;}

n數值設定為5，因此只選定第五項被選取。

4. :nth-child(an+b)自訂數列

裡面的「n」從0數起，a與b為自訂數值。

ex:

.list_3 li:nth-child(2n+1){ background:#4CB0D4; color:#fff;}

n的值從0算起，因此數列計算如下：

2X0+1=1

2X1+1=3

2X2+1=5

......以此類推。

CSS3 的:nth-child(n)在網頁設計上十分實用，初學者可以多加應用看看。