1. 深呼吸，直接內容

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

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

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

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

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

1. 這個元素是個段落元素

2. 這個元素是父標簽的第二個孩子元素

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

1. 選擇父標簽中特定標簽的第二個段落子元素

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

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

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

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

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

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

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

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

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

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

2. 二次深呼吸，個人體會

老實講，對于:nth-child和:nth-of-type這兩個屬性自己用的并不多，對這兩個屬性的認識就像是一團漿糊。印象在使用:last-child這個類似選擇器的時候，出現了沒有效果的情況，現在想想，就是因為對選擇器的理解不夠透徹，所以使用的時候出問題的

今天對這兩個選擇器好好地過了遍之后，個人覺得:nth-of-type更彪悍些，不容易出問題，盡管:nth-child貌似更常見些。所以以后要選擇某某元素下的第幾個什么標簽，建議使用:nth-of-type，因為頁面元素插入其他標簽啊什么的是比較常見的，如果使用:nth-child，選擇器可能就是嗝屁

不過嘛，世事無絕對，最靠譜的就是對這兩個選擇器徹徹底底地了解，具體情況具體使用

另外一個小小的建議，為了避免出現“尼瑪我的:nth-child變成打醬油的不頂鳥用啦！”這樣的疑問，最好使用父標簽層級限制，而不是當前標簽類型限制。如下示例

當然，還是那句話，要看實際情況如何，沒有一勞永逸，一方通行的代碼

總結

以上是生活随笔為你收集整理的CSS3选择器:nth-child和:nth-of-type之间的差异的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。