本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

nth-child和nth-of-type的区别，这是个很奇怪的问题，但是如果没有思考过它们是怎么划分的，还真的没办法很准确的判断选择到的元素，因此本文做一个场景解释。

场景

<body>
    <div id="box1">
        <em id="em1">1111</em>
    </div>
    <em id="em2">2222</em>
    <div id="box2">
        <em id="em3">3333</em>
        <em id="em4">4444</em>
    </div>
</body>

在这里插入图片描述

nth-child

<style>
    em:nth-child(1) {
        color: red;
    }
</style>

nth-child会寻找所有em的父元素的所有子元素进行划区。
em1父元素是box1这个div，它的所有子元素就一个em，圈起来。
em2父元素是body，所有子元素依次是box1、em、box2。
em3和em4父元素都是box2，是同一个区域，所有子元素就是两个em。

在这里插入图片描述

结果：

三个区域找nth-child(n)里面找第n个元素，然后检查是不是em，是的话就生效，不是就不生效
n为1时，第一个区域就一个em1，生效
第二个区域第一个元素为div不是em2，失效
第三个区域第一个元素是em3，生效

如果n为2的话就是em2和em4生效了，你可以根据上面的方法推断出来吗？

nth-of-type

<style>
    em:nth-of-type(1) {
        color: red;
    }
</style>

结果：

1.还是同样的划区方法，不过，会剔除所有区域中不是em的元素，这就是区别。

2.区域1和3还是一样的，区域2剔除了box1和box2，区域里只剩下一个em2，n为1时被选中。在这里插入图片描述

如果n取2时，只有em4被选中噢

nth-child如果前面不添加筛选查找元素

不推荐这么使用，筛选范围太泛了。
我们上文是使用em:nth-child(n)，如果不添加em，也就是会将所有区域划分且没有限制元素是什么了，只要是第n个就添加样式。

例：

首先我们还是将内容限制在body，否则会从html整个根元素开始划分，注意中间有空格，因此查找元素不是body。
而且用body来划分，区域就是body底下所有区域，这里还是我们原来的三个区域，比较好理解。
第一个区域和第三个区域还是跟原来一样。
区别就是第二个区域第一个元素是box1，这次没有限制必须是em了，所以样式生效。

<style>
    body :nth-child(1) {
        color: red;
    }
</style>

虽然还是em1和em3变成红色，但是我们可以检查元素发现，box1也被添加上了样式：在这里插入图片描述可以回头再试试em:nth-child(n)的话会发现box1是不会被添加的。

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~

css选择器nth-child和nth-of-type区别

前言

场景

nth-child

nth-of-type

nth-child如果前面不添加筛选查找元素

尾言