教你發現CSS3的"nth-child"和"nth-of-type"的區別！

對於初學者來說，區別"nth-child"和"nth-of-type"是一個比較頭疼的問題，為了更好幫助大家區別兩者使用方法，特在此加以區分。

首先建立一個HTML結構。

<div class="post">
<p>我是文章的第一個段落</p>
<p>我是文章的第二個段落</p><!** ==我要變成第二個段落== **>
</div>

接下來,使用“:nth-child”和“:nth-of-type”選擇段落並改變其文字顏色。

.post>p:nth-child(2){color:red;}
.post>p:nth-of-type(2){color:red;}

上面的程式碼都把“post”中的第二段文字變成了大紅色，是不是代表這兩個選擇器就是一樣的呢？其實不然。“nth-child”僅從字面上來解釋，其實包含了兩層意思。首先是一個段落元素，而且這個段落是父元素“div”的第二個子元素；而“nth-of-type”從字面上解釋是“選擇父元素div的段落二”。

上面一段話看起來是不是很暈，有沒有更好方法來區分它們呢？~~~ 有的！把上面的HTML結構改變一下，在段落前加一個標題“h1”。

<h1>我是標題</h1>
<p>我是文章的第一個段落</p>
<p>我是文章的第二個段落</p><!** ==我要變成第二個段落== **>

前面的樣式不變，但結構卻完全不同了。“p:nth-child(2)”並沒有選擇段落二，而是選擇了段落一，從而沒有達到需要的效果。

.post>p:nth-child(2){color:red;}/*第一個段落變成紅色，不是我們需要的效果*/

“nth-child(2)”選錯了段落，但“p:nth-of-type(2)”卻正常工作，選擇還是段落二，實現了想要的效果。

.post>p:nth-of-type(2){color:red;}/*第二個段落變成紅色，是我們需要的效果*/

如果在“h1”標題後面新增一個“h2”標題，此時“p:nth-child(2)”將無法選擇任何元素，因為，此時“div”的第二個元素並不是段落一“p”，所以無法選擇任何元素。但“p:nth-of-type(2)”仍然能正常工作，因為選擇的始終是“div”中第二個段落“p”。

大家只需記住一點：“nth-child”選擇的是父元素的子元素，這個子元素並沒有指定確切型別，同時滿足兩個條件時方能有效果：其一是子元素，其二是子元素剛好處在那個位置；“nth-of-type”選擇的是某父元素的子元素，而且這個子元素是指定型別。