教你發現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」選擇的是某父元素的子元素，並且這個子元素是指定類型。