:nth-child()和:nth-of-type()常見的取值有：
數字（1,2,3....），倍數（2n，3n....），奇數（odd），偶數（even）
本文的實例代碼：主要爲1個不帶有li類的div標籤，三個帶有li類h1、h2、p、div
<div class="box">
<div>這是沒有.li的div</div>
<h1 class="li">這是h1-1</h1>
<p class="li">這是p-1</p>
<div class="li">這是div-1</div>
<h2 class="li">這是h2-1</h2>
<h1 class="li">這是h1-2</h1>
<h2 class="li">這是h2-2</h2>
<div class="li">這是div-2</div>
<p class="li">這是p-2</p>
<h1 class="li">這是h1-3</h1>
<div class="li">這是div-3</div>
<p class="li">這是p-3</p>
<h2 class="li">這是h2-3</h2>
</div>
:nth-child()的簡單方式的理解:
1,先計算是第幾個節點，2,然後再判斷選擇器。
例如：
（1） p:nth-child(3)：
1,先算節點：同父的第三個節點，2,然後判斷選擇器：是不是p標籤選擇器。結果：同父的第三個節點若是p標籤選擇器就運用樣式。
效果圖：
（2） .li:nth-child(3)
1,先算節點：同父的第三個節點，2,然後判斷選擇器：是不是.li選擇器。結果：同父的第三個節點若是.li選擇器就運用樣式。
:nth-child()的用法就是這樣比較簡單，:nth-of-type()就複雜一些。
:nth-of-type()的簡單方式理解：
1,先將同父節點按照標籤分組，2,按照分組後的標籤計算是第幾個節點，3,然後再判斷選擇器
例如：
(1) p:nth-of-type(3)
1,先將標籤分組（h1,h2,div,p...）,2每組的第三個節點，3,是不是p標籤。
效果圖：
將這些標籤進行分類後，選擇p標籤的第三個運用樣式。
（2） .li:nth-of-type(3) 1,先將標籤分組（h1,h2,div,p...）,2每組的第三個節點，3,是不是.li選擇器
效果圖：
1,內部的分組：
2,所有的分組的第三個節點即：div-2,h1-3,h2-3,p-3
3,判斷是否爲li類。
總結：這是在不斷的改變實例和查看他們的屬性，所總結得出的。如有不對之處，歡迎大家評論通知。我將隨時更改。
微信小程序【My簡歷】有需要的可以瞭解一下：張三的簡歷
-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到問題：+WX：WAZJ-0508，及時聯繫---------------------------------------------------------------------------------------------------------------------------------------------------