nth-child和nth-of-type都是子代選擇器，他們的區別就是nth-child強制是父元素的第幾個子元素，而nth-of-type要求是同中類型的第幾個元素。
<body>
<span>首span</span>
<p>第一個p</p>
<p>第二個p
<span>插入的span</span>
</p>
<p>第三個p</p>
<span>尾span</span>
</body>
p:nth-child(1){
background-color: blue;
}
可以看到頁面沒有任何元素變色。原因是該選擇器先找到p元素的父元素body，然后找父元素的第一個子元素，body的第一個子元素是span，但p:nth-child(1)要求的類型是p，所以沒有符合條件的。
由於第一個p是body的第二個子元素，p:nth-child(2)就可以選中第一個p了。
修改代碼：
span:nth-child(1){ background-color: blue; }
結果發現首span和插入的span背景顏色都發生了改變，原因是插入的span是第二個p中的第一個元素，也符合該選擇器的條件。
告訴瀏覽器選擇body下的span，body>span:nth-child(1)。結果只有首span發生了變色。
<body>
<span>首span</span>
<p>第一個p</p>
<p>第二個p
<span>插入的span</span>
</p>
<p>第三個p</p>
<span>尾span</span>
</body>
p:nth-of-type (1){
background-color: blue;
}
結果第一個p背景顏色發生了改變，p:nth-of-type (1)會找到p元素的父元素body，然后找子元素中所有的p元素，排列后找到第一個p元素。
修個代碼
span:nth-of-type(2){
background-color: blue; }
結果尾span發生了變色，插入的span沒有變色，原因是排列的時候只是對同級的進行排列，插入的span是另一個級別中的第一個span，改變第二個p中的結構
<p>第二個p
<span>插入的span</span>
<span>插入的span2</span>
</p>
這樣“插入的span2”就發生了變色。
在日常使用中，為了防止記混，推薦只用一個，推薦使用:nth-of-type。