nth-child和nth-of-type的区别

nth-child和nth-of-type是比较常用的一个伪类选择器，过去一直没在意这个，今天发现原来他们之间还有这样的区别，记录一下。

我们首先来看MDN上对它们的解释：

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）

:nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

注：注意不能使用b+an的形式，必须是an+b的形式，即n必须在最前面，n从0开始取值，为0,1,2…

从上面的描述似乎不容易看出区别，我们用例子来说明：
这是html结构，下面的css均是以这个html为基础

<section>
   <div>我是1号divdiv>
   <div>我是2号divdiv>
   <div>我是3号divdiv>
   <p>我是1号pp>
   <p>我是2号pp>
   <p>我是3号pp>
section>
<div>
   <span>我是1号spanspan><span>我是2号spanspan>
div>

第一个例子：

section div:nth-child(2) {
  color: red;
}

section div:nth-of-type(3) {
  color: blue;
}

效果图1

从上图可以看出他们都很好的选中了对应的元素，这里还看不出他们有什么区别。好的，我们再看第二个例子：

section p:nth-child(2) {
	color: red;
}

section p:nth-of-type(3) {
    color: blue;
}

效果图2

咦？为什么第二个p标签没有变色？为什么nth-child不起作用但是nth-of-type却可以呢？这里我们就需要理解这两者的原理了。浏览器在生成css渲染树的时候，对于选择器的处理是从右到左的（关于原因可以看我的笔记）。那么对于section p:nth-child(2)，首先浏览器会在dom树中寻找所有子元素，将他们一一排序，然后再找到其中的第二个元素，找到第二个元素后，再选择其中的p标签。最后再查看父级元素是不是section元素。我们现在来看看html结构，发现子元素有p标签、div标签、span标签（这里不考虑body标签和html标签），好的，给他们一一编号，注意这个编号是在同一个父级元素里面的子元素之间进行，这样我们可以知道第一个p标签其实是4号。也就是说nth-child(2)选中的元素有div和span，没有p标签。所以p:nth-child(2)自然就得不到结果了。所以样式不起作用。那么nth-of-type怎么就可以选中呢？这是因为nth-of-type的编号比nth-child多了一个限制条件，那就是它编号的是同类标签。也就是说，找到dom树中的子元素后，先按照同类标签分类，再对每类标签从1开始编号，这样编号结果其实就和标签里面的数字编号一致了。因此就可以得到上面的结果啦。
为了更好的体现出nth-child的特性，再举几个例子：

:nth-child(2) {
   background-color: blue;
}

大家说这个效果是什么呢？效果是这样的：

效果图3

是不是吓一跳？怎么全变蓝呢？其实根据上面的分析，我们可以发现body是html的第二个子元素，知道这一点就不奇怪了。
再看下面这个：

:nth-of-type(2) {
   color: blue;
}

可以看到所有2号元素都变蓝了。表示选中了所有同类元素里面的第二个元素。

以上。