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

2024-10-21 15:49:45

普通使用 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 会先获取到该类的标签然后根据标签去选择第几个标签

最新文章

热门文章