: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，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------