css伪类选择器:nth-of-type(n)和:nth-child(n)的区别

参考：https://www.cnblogs.com/superior0325/p/8776648.html

介绍：

: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>标签靠前，两种写法实现的效果是一致的，所以使用的时候要根据情况而定。