對於初學者來說，區別"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;}/*第二個段落變成紅色，是我們需要的效果*/