css中nth-chid和nth-of-type的区别

最新推荐文章于 2025-05-28 17:51:49 发布

小白前端攻城狮

最新推荐文章于 2025-05-28 17:51:49 发布

阅读量169

点赞数 1

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/m0_54104677/article/details/128977998

版权

先看一段代码

<style>
    section div:nth-child(1){
        background-color: red;
    }
</style>
<body>
    <section>
        <p>喵喵</p>
        <div>火花</div>
        <div>水蓝蓝</div>
    </section>
</body>

结果样式没有发送改变，这是因为nth-child()选择器执行顺序是先看nth-child(1) 在回去看div,由于第一个元素是p标签而不是div，所以样式没有发生改变。

接下来，我们将nth-child(1) 改成nth-of-type(1)

<style>
    section div:nth-of-type(1){
        background-color: red;
    }
</style>
<body>
    <section>
        <p>喵喵</p>
        <div>火花</div>
        <div>水蓝蓝</div>
    </section>
</body>

样式发生了改变，因为nth-of-type()的执行顺序是，先看元素（div），之后再看是第几个，所以就选中了火花