nth-of-type(n)和nth-child(n)的区别

nth-of-type 与nth-child都属于css选择器，都是在同级别节点中找到第n个元素，前者是先确定元素类型，再计算n的位置；后者是先确定n的位置，再确定元素类型

例：

<div class="box">
        <span>span1</span>
        <p>p1</p>
        <p>p2</p>
</div>

　　

.box p:nth-child(2){
    background: red;
}
//p1 变红

.box p:nth-of-type(2){
    background: red;
}
//p2 变红

　　如果span标签靠后，两个p标签靠前，两种写法实现的效果是一致的，所以使用的时候要根据情况而定。