一、深呼吸，直接內(nèi)容

:nth-child和:nth-of-type都是CSS3中的偽類選擇器，其作用近似卻又不完全一樣，對于不熟悉的人對其可能不是很區(qū)分，本文就將介紹兩者的不同，以便于大家正確靈活使用這兩類選擇器。

先看一個簡單的實例，首先是HTML部分：

? ?

我是第1個p標(biāo)簽

我是第2個p標(biāo)簽

然后兩個選擇器相對應(yīng)的CSS代碼如下：

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

上面這個例子中，這兩個選擇器所實現(xiàn)的效果是一致的，第二個p標(biāo)簽的文字變成了紅色，如下截圖（截自IE9）：

您可以狠狠地點擊這里：:nth-child測試demo1:nth-of-type測試demo1

盡管上面兩個demo的最后效果一致，但是兩個選擇器之間存在差異是必然的。

對于:nth-child選擇器，在簡單白話文中，意味著選擇一個元素如果：

這是個段落元素

這是父標(biāo)簽的第二個孩子元素

對于:nth-of-type選擇器，意味著選擇一個元素如果：

選擇父標(biāo)簽的第二個段落子元素

:nth-of-type選擇器，恩……怎么講呢？限制條件少點~~

我們把上面的實例稍作修改，就可以看到這兩個選擇器之間的差異表現(xiàn)了，如下HTML代碼：

? ?

我是第1個p標(biāo)簽

我是第2個p標(biāo)簽

還是與上面例子一致的CSS測試代碼：

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

這時候兩個選擇器所渲染的結(jié)果就不一樣了。

p:nth-child(2)悲劇了，其渲染的結(jié)果不是第二個p標(biāo)簽文字變紅，而是第一個p標(biāo)簽，也就是父標(biāo)簽的第二個子元素。如下效果截圖：

您可以狠狠地點擊這里：:nth-child測試demo2

p:nth-of-type(2)的表現(xiàn)顯得很堅挺，其把希望渲染的第二個p標(biāo)簽染紅了，如下截圖：

您可以狠狠地點擊這里：:nth-of-type測試demo2

對照上面兩個選擇器的語義，此處的效果表現(xiàn)差異不難理解。

對于p:nth-child(2)表示這個元素要是p標(biāo)簽，且是第二個子元素，是兩個必須滿足的條件。于是，就是第一個p標(biāo)簽顏色為紅色（正好符合：p標(biāo)簽，第二個子元素）。如果在div標(biāo)簽后面再插入個span標(biāo)簽，如下：

? ?

我是第1個p標(biāo)簽

我是第2個p標(biāo)簽

那么p:nth-child(2)將不會選擇任何元素。

而p:nth-of-type(2)表示父標(biāo)簽下的第二個p元素，顯然，無論在div標(biāo)簽后面再插入個span標(biāo)簽，還是h1標(biāo)簽，都是第二個p標(biāo)簽中的文字變紅。

這兩者的差異用一個跟切合實際的情況比喻就是計劃生育查人口：前者是如果是第二胎，且是女孩，罰款！后者是管他第幾胎，第二個出身的女孩，罰款！