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