CSS3中nth-of-type与nth-child区别分析详解,nth-of-type和nth-child对比区别,CSS3强大选择器nth-of-type,nth-child

CSS3出来那么久了,很多新特性都已经得到了主流浏览器的很好支持,相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器,这两个选择器功能很像,甚至在很多情况下使用的作用是相同的,但又有差异,容易给人造成困扰,我之前也是困扰了一段时间,查了忘,忘了查,浪费了很多时间。这里做一个测试以及梳理,以便查询参考记忆。

elt:nth-child(n):所干的事情分为两步

  1. 找到当前元素的父元素下所有的子元素。
  2. 在所有的子元素中找到第n个元素,如果找到的第n个元素,第n个元素是前面的elt类型或者类,符合前面elt规则要求(可能是类选择器,可能是元素选择器等)则被选中,应用相应的样式,否则不被选中,什么也不做。
  3. 如果是 elt :nth-child(n),elt后面,:前面有空格。则是寻找elt元素下的直接子元素中的第n个元素,无论第n个元素是什么类型或者类都会被选中。

elt:nth-of-type(n):所干的事情分三步

  1. 找到当前元素的父元素下的所有子元素的类型(nodeType)
  2. 找到每个类型对应的的所有元素,例如所有的div,p,h3
  3. 从第二步中每种元素类型中的元素中开始计数,并找到第n个元素,符合则应用样式规则,结果可能会选中多个元素,比如前面的条件是类选择器,而这个类选择器对应多个元素类型。
  4. 如果是elt :nth-of-type(n),elt后面,:前面有个空格,则是先找到elt元素下面的所有子元素类型,然后每个类型中的第n个元素选中应用样式。

举例代码结构如下:

 
div 1

p 1

h3 1

div 2

p 2

h3 2

div 3

p 3

h3 3

1.验证nth-child()

.p_item:nth-child(2) {
    background: #c00;
}

.p_item:nth-child(3) {
    background: #c00;
}

.h3_item:nth-child(3) {
    background: #c00;
}


.box :nth-child(5) {
    background: greenyellow;
}

.box :nth-child(6) {
    background: greenyellow;
}

.box :nth-child(7) {
    background: greenyellow;
}

CSS3中nth-of-type与nth-child区别分析详解,nth-of-type和nth-child对比区别,CSS3强大选择器nth-of-type,nth-child_第1张图片

 如图结果所示:

第一个.p_item:nth-child(2)我们选择和.p_item同级所有元素,然后选择第二个元素,检验第二个元素的类是否是.p_item,是则变红。

第二个.p_item:nth-child(3),同理先选择所有同级元素,找到第三个元素,然后发现第三个元素不是.p_item类,而是h3_item类,所以不匹配什么也不做。

第三个条件.h3_item:nth-child(3),是作为上面的第二条件佐证存在,找到了第三个元素,然后发现也是h3_item类,符合条件所以选中,应用样式。

第四个,第五个,第六个.box :nth-child(5),.box :nth-child(6),.box :nth-child(7)三个连续的选择器选择了按次序的三个元素而前面的条件都是.box :,这个条件是查找.box下的所有子元素,不管这个子元素是什么类或者类型,只要符合第n个则被选中。

 

2.验证nth-of-type()

.div_item:nth-of-type(1) {
    background: #c00;
}
.div_item:nth-of-type(2) {
    background: #c00;
}

.box :nth-of-type(3) {
    background: greenyellow;
}

CSS3中nth-of-type与nth-child区别分析详解,nth-of-type和nth-child对比区别,CSS3强大选择器nth-of-type,nth-child_第2张图片

 

第一个第二个条件:.div_item:nth-of-type(1),.div_item:nth-of-type(2)可以看到结果中我们选择到了第一个和第四个元素,并且这两个元素类型都是div。所以查找步骤是先查看冒号':'前面的条件的元素类型(nodeType),找到所有同级的相同元素类型的元素,这里是所有的div,然后从这些元素中选择第n个元素,这里是第1个div,和第2个div。他们在排序中分别是第1和第4。

第三个条件:.box :nth-of-type(3)是冒号':'距离前面条件有个空格,从结果中可以看到选择了.box下面所有类型的第三个元素,在这里是div中的第三个,p中的第三个,h3中的第三个元素。他的作用是,如果冒号距离前面的条件有个空格,则是找到前面条件元素下的所有子元素类型,然后找到每个子元素类型中的第n个元素。

这里还有一种情况的修改结构和条件如下:

type_diff 1

type_diff 2

type_diff 3

type_diff 4

type_diff 5

type_diff 6

type_diff 7

type_diff 8

type_diff 9

结果:

CSS3中nth-of-type与nth-child区别分析详解,nth-of-type和nth-child对比区别,CSS3强大选择器nth-of-type,nth-child_第3张图片

条件.type_diff:nth-of-type(2)明明是选择.type_diff对应元素类型第二个元素,一般来说只是一个元素,但是我们选择到了三个元素。这里并没有出现了bug。

我们可以看到.type_diff对应了三种元素类型div,p,h3。所以这里依然是一样的步骤,先找到.type_diff对应的元素类型,这里有三种,然后找到每种元素类型对应的第n个元素即可。原理是一样一样的。

 

补充一些常用选择方法:(可以衍生很多种)

nth-child(-n+2)  :选择前2个元素

nth-child(n+3)  :匹配>=3的元素

 

 

 

 

 

你可能感兴趣的:(CSS3相关)