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

:nth-child()用法

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型。

在w3c中說明的?n?可以是數(shù)字、關(guān)鍵詞或公式。常用的有4中寫法。

1.具體的數(shù)字

:nth-child(n):匹配父元素中第n個(gè)元素，例：li:nth-child(3){background:green;}

2.倍數(shù)

:nth-child(an):匹配父元素中第a數(shù)倍的元素，例:li:nth-child(2n){background:red;}

3.倍數(shù)分組

:nth-child(an+b)或:nth-child(an-b):先對(duì)元素進(jìn)行分組，每組有a個(gè)，b為組內(nèi)成員的序號(hào)，其中字母n和加號(hào)+不可缺省，位置不可調(diào)換，這是該寫法的標(biāo)志，其中a,b均為正整數(shù)或0。如3n+1、5n-1。

4.奇偶寫法

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

:nth-of-type()的用法

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

瀏覽器支持

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