CSS3选择器:nth-child和:nth-of-type之间的差异

1. 深呼吸,直接内容

:nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器

先看一个简单的实例,首先是HTML部分:

这里写图片描述

这里写图片描述

上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色,如下截图(截自IE9)

这里写图片描述

尽管上面两个demo的最后效果一致,但是两个选择器之间存在差异是必然的

对于:nth-child选择器,在简单白话文中,意味着选择一个元素

1. 这个元素是个段落元素

2. 这个元素是父标签的第二个孩子元素

对于:nth-of-type选择器,意味着选择一个元素

1. 选择父标签中特定标签的第二个段落子元素

:nth-of-type选择器,恩……怎么讲呢?限制条件少点~~

我们把上面的实例稍作修改,就可以看到这两个选择器之间的差异表现了,如下HTML代码

这里写图片描述

这里写图片描述

这时候两个选择器所渲染的结果就不一样了

p:nth-child(2)悲剧了,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。如下效果截图

这里写图片描述

p:nth-of-type(2)的表现显得很坚挺,其把希望渲染的第二个p标签染红了,如下截图

这里写图片描述

对照上面两个选择器的语义,此处的效果表现差异不难理解

对于p:nth-child(2)表示这个元素要是p标签,且是第二个子元素,是两个必须满足的条件。于是,就是第一个p标签颜色为红色(正好符合:p标签,第二个子元素)。如果在div标签后面再插入个span标签,如下

这里写图片描述

那么p:nth-child(2)将不会选择任何元素

而p:nth-of-type(2)表示父标签下的第二个p元素,显然,无论在div标签后面再插入个span标签,还是h1标签,都是第二个p标签中的文字变红

这两者的差异用一个跟切合实际的情况比喻就是计划生育查人口:前者是如果是第二胎,且是女孩,罚款!后者是管他第几胎,第二个出身的女孩,罚款!

2. 二次深呼吸,个人体会

老实讲,对于:nth-child和:nth-of-type这两个属性自己用的并不多,对这两个属性的认识就像是一团浆糊。印象在使用:last-child这个类似选择器的时候,出现了没有效果的情况,现在想想,就是因为对选择器的理解不够透彻,所以使用的时候出问题的

今天对这两个选择器好好地过了遍之后,个人觉得:nth-of-type更彪悍些,不容易出问题,尽管:nth-child貌似更常见些。所以以后要选择某某元素下的第几个什么标签,建议使用:nth-of-type,因为页面元素插入其他标签啊什么的是比较常见的,如果使用:nth-child,选择器可能就是嗝屁

不过嘛,世事无绝对,最靠谱的就是对这两个选择器彻彻底底地了解,具体情况具体使用

另外一个小小的建议,为了避免出现“尼玛我的:nth-child变成打酱油的不顶鸟用啦!”这样的疑问,最好使用父标签层级限制,而不是当前标签类型限制。如下示例

这里写图片描述

当然,还是那句话,要看实际情况如何,没有一劳永逸,一方通行的代码

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页