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