CSS3選取器:nth-child和:nth-of-type之間的差異

標籤：

CSS3選取器:nth-child和:nth-of-type之間的差異 這篇文章發佈於 2011年06月21日，星期二，23:04，歸類於 css相關。 閱讀 57546 次, 今日 143 次

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1709

一、深呼吸，直接內容

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

先看一個簡單的執行個體，首先是HTML部分：

<section>    <p>我是第1個p標籤</p>    <p>我是第2個p標籤</p>  <!-- 希望這個變紅 --></section>

然後兩個選取器相對應的CSS代碼如下：

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

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

上面這個例子中，這兩個選取器所實現的效果是一致的，第二個p標籤的文字變成了紅色，如下（截自IE9）：

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

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

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

1. 這是個段落元素
2. 這是父標籤的第二個孩子項目

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

1. 選擇父標籤的第二個段落子項目

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

我們把上面的執行個體稍作修改，就可以看到這兩個選取器之間的差異表現了，如下HTML代碼：

<section>    <div>我是一個普通的div標籤</div>    <p>我是第1個p標籤</p>    <p>我是第2個p標籤</p>  <!-- 希望這個變紅 --></section>

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

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

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

這時候兩個選取器所渲染的結果就不一樣了。

p:nth-child(2)悲劇了，其渲染的結果不是第二個p標籤文字變紅，而是第一個p標籤，也就是父標籤的第二個子項目。如下效果：

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

p:nth-of-type(2)的表現顯得很堅挺，其把希望渲染的第二個p標籤染紅了，如下：

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

對照上面兩個選取器的語義，此處的效果表現差異不難理解。

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

<section>    <div>我是一個普通的div標籤</div>    <span>我是一個普通的span標籤</span>    <p>我是第1個p標籤</p>    <p>我是第2個p標籤</p>  <!-- 希望這個變紅 --></section>

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

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

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

原文：http://www.zhangxinxu.com/wordpress/2011/06/css3%E9%80%89%E6%8B%A9%E5%99%A8nth-child%E5%92%8Cnth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82/

CSS3選取器:nth-child和:nth-of-type之間的差異