关于nth-of-type的注意事项

普通使用 nth-of-type:

<div class="box">
    <div>
        第一个元素
    </div>
    <p>没有用的元素</p>
    <div>
        第二个元素
    </div>
</div>

.box div:nth-of-type(2){
/*这里面匹配到的是：第二个元素*/
}

如果使用类选择器加 nth-of-type 则会造成不同的效果：

<div class="box">
    <div>
        第一个元素,没有添加css类
    </div>
    <p>影响nth选择的元素</p>
    <div class="myDiv">
        第二个元素
    </div>
</div>

.box .myDiv:nth-of-type(1){
/*这里面匹配到的是：**第一个元素** */
}

/*相当于： */
.box div:nth-of-type(1){

}

总结

如果使用类选择器加 nth-of-type
则 nth-of-type 会先获取到该类的标签然后根据标签去选择第几个标签