nth-child & nth-of-type讲解

gityuan 发布于2019-08-30 12:47 / 2669人阅读

摘要：关于的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一使用得出的效果如图使用得出的效果如图由以上两个效果图可知，在父级元素下只有标签的时候，两者没什么区别。

关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家

按标签进行选择

写法一：

使用p:nth-child(n+2){color:red;}得出的效果如图：

使用p:nth-of-type(n+2){color:green;}得出的效果如图：

由以上两个效果图可知，在父级元素（div.class=aaa）下只有p标签的时候，两者没什么区别。

写法二：

css中使用p:nth-child(n+2)的时候，效果如下：

css中使用p:nth-of-type(n+2)的时候，效果如下：

由此可知，nth-child和nth-of-type的区别就是nth-child只选择父级元素下的第几个子元素，不会对子元素的标签进行区分，如选择的条件是n+2,从父级元素第二个子元素开始选择，当第二个元素是p标签则进行选择，如果不是则跳过，如：

而nth-of-type会选择标签的第几个元素，如，p:nth-of-type(n+2)，就是读取父级元素下p标签的第几个元素。当你在p标签之中插入其他标签的时候，也是读取p标签的第几个元素。如：

以上讲解的是nth-child 和 nth-of-type都是用标签进行选择，下面讲讲它们用class类名进行选择的区别

按class类名进行选择

写法一：

这种写法使用nth-child和nth-of-type的效果一样，和标签选择的效果也一样，所以不再详细说明。

写法二：

使用.bbb:nth-child(n+2){color:red;}使用的效果如图：

而使用.bbb:nth-of-type(n+2){color:green;}的效果如图：

这就有个问题，nth-child和nth-of-type是否是根据class类名进行选择，还是根据标签选择。为了测试，我将html改为：

使用.bbb:nth-child(n+2){color:red;}使用的效果如图：

而使用.bbb:nth-of-type(n+2){color:green;}的效果如图：

而当给“222”和“333”之间的span标签加上一个class=“bbb”的类名的时候，出现的效果如图：

html代码：


    
        哈哈
        111
        222
        我是span标签
        333
        我是span标签2
        444
        555
        666
        
            我是div.class=bbb
            我是a标签第一个
            我是a标签第二个

使用p:nth-child(n+2){color:red;}效果如图：

使用p:nth-of-type(n+2){color:green;}效果如图：

由以上两个效果图可知，nth-child和nth-of-type可以通过class类名进行选择，nth-child是从父元素div下的第二个子元素进行判断，如果拥有该class类名，则进行选中；但是 nth-of-type是首先判断class名的标签的类型，再分别对不同的标签从对应的位置开始选择拥有该类名的元素(如这里，先开始给p标签从第二个元素开始选择，如果拥有该类名则选中，再给span标签的第二个元素开始选择，如果拥有该类名则选中)。

总结：

nth-child:

用标签进行选择：如p:nth-child（n+2）对父级元素的子元素进行统计，从第二个子元素开始判断，如果是该标签则选中

用类名进行选择：如.div：nth-child(n+2) 同理，对父级元素的子元素进行统计，从第二个子元素开始判断，如果子元素拥有该类目则选中。

nth-of-type:

用标签进行选择：如p:nth-of-type（n+2）父级元素的p标签的子元素，从第二个p标签开始选中

用类名进行选择：如.div：nth-of-type(n+2) 父级元素拥有class=“div"的所有不同的标签并分别进行判断，分别对不同的标签的第二个元素开始判断，如果拥有class=“div”的类名则选中。

混合云服务器托管 nth-of-type 入门讲解实例讲解讲解求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115059.html

nth-child &amp; nth-of-type讲解

摘要：关于的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一使用得出的效果如图使用得出的效果如图由以上两个效果图可知，在父级元素下只有标签的时候，两者没什么区别。关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一： ...

Binguner 2019-08-19 17:37 评论0 收藏0
nth-child &amp; nth-of-type讲解

摘要：关于的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一使用得出的效果如图使用得出的效果如图由以上两个效果图可知，在父级元素下只有标签的时候，两者没什么区别。关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一： ...

waterc 2019-08-01 15:04 评论0 收藏0
xpath&amp;css选择器

摘要：选取所有拥有名为的属性的元素。选取元素的所有元素，且其中的元素的值须大于。且供选择的路径之间并无关联。选择当前节点的所有先辈。文本读取文件读取利用解析选择器转自阮一峰的网络日志基本选择器最基本的就是针对标签，类以及了。本文参考较多，原创基本没有，权当知识归纳。xpath并不复杂，简单的使用看完之后，及时查阅文档也是可以写出来的。这里放上我的练手文件，大家可以参考，或者挑毛病(^__^...

niceforbear 2019-08-29 13:13 评论0 收藏0
【CSS】nth-child 与 nth-of-type辨析

摘要：和是的两个伪选择器。就是要找第二个子元素，也就是第二步检查是否匹配。你以为会匹配到结果并没有解释的查找过程也有两步找出同标记类型下的第个元素。那么这个样式应用成功，因为匹配。但是则应用失败，因为的里没有。 nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素，后者的字面意思是选择某类型的第几个元素...

wthee 2019-08-29 14:16 评论0 收藏0
【CSS】nth-child 与 nth-of-type 的元素查找方式

摘要：和是的两个伪选择符。所以，和的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。也就是说选择符与他们的查找方式没有关系。错误查找第二个包含的元素。 nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n...

邹强 2019-08-29 14:15 评论0 收藏0