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;
}

 如图结果所示：

第一个.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;
}

 

第一个第二个条件：.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

结果：

条件.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的元素