浅析 nth-child(n) 和 nth-of-type(n)
首先看一个例子
<div>
<p>第一个段落</p>
<p>第二个段落</p>
</div>
p:nth-child(2) {
background: red;
}
p:nth-of-type(2) {
background: yellow;
}
分别执行两段 css， 发现效果是一样的，如下：
但是如果文档的结构变得更加复杂呢？看下面一个例子：
<body>
<h1>这是标题</h1>
<p>这是副标题</p>
<div>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</div>
<p>这是注释</p>
<p>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
p:nth-child(2) {
background: red;
}
p:nth-of-type(3) {
background: yellow;
}
此时的样式应该是怎样的呢？效果如下：
平时开发中对于 nth-child(n）和 nth-of-type(n) 常用在一些需要单独渲染的列表元素的选取上面，因为结构单一，所以不难区分，久而久之就容易对两者的用法产生混淆，虽然概念和用法都比较简单，但是一些教程和文档上面的描述比较绕，理解起来比较困难，所以这里针对上面的例子，通过集合的方式来简单的辨析一下两种元素选取方式的区别。
ele:nth-child(n)
选取父元素的第 N 个子元素，不论元素的类型。n 可以是数字（从 1 开始），关键词（even/odd）,或者公式（3n + 1, 2n + 1...）
元素的选取方式和过程：
- 选取 ele 的父元素的所有一级子元素 => 集合 P(不分类型，若有多个 ele，则分别选取，最终生成多个集合)
- 在集合 P 中选取第 n 个，判断类型是否为 ele，若是，则返回元素，否则返回空
针对上例子，首先选取 p 元素的父元素的所有一级元素，形成集合，因为有多个 p 元素，所以要分别选取，最终形成两个子元素集合
body 下的所有子元素集合 P
[ <h1>这是标题</h1>, <p>这是副标题</p>, <div>...</div>, <p>这是注释</p>, <p>Internet Explorer 不支持 :nth-child() 选择器。</p>, ]
div 下的所有子元素结合 K
[ <p>第一个段落。</p>, <p>第二个段落。</p>, <p>第三个段落。</p>, <p>第四个段落。</p>, ]
在 P 中选取第 2 个元素 ——> 判断元素类型是否为 p ——> 是 ——> 返回此元素
<p>这是副标题</p>
在 K 中选取第二个子元素 ——> 判断元素类型是否为 p ——> 是 ——> 返回此元素
<p>第二个段落。</p>
ele:nth-of-type(n)
选取父元素的第 N 个类型为 ele 的子元素。
- 选取父元素的所有类型为 ele 的子元素 => 集合 N
- 选取这些子元素集合 N 中的第 n 个，并返回
第一步生成集合 M 和 N
[ <p>第一个段落。</p>, <p>第二个段落。</p>, <p>第三个段落。</p>, <p>第四个段落。</p>, ]
[ <p>这是副标题</p>, <p>这是注释</p>, <p>Internet Explorer 不支持 :nth-child() 选择器。</p>, ]
然后分别选取 M 和 N 中的第三项，返回：
<p>第三个段落。</p>
<p>Internet Explorer 不支持 :nth-child() 选择器。</p>
简单总结来说，nth-child(n) 可以理解为先无条件选择子元素，后选择对应序号的元素并判断类型是否符合
nth-of-type(n) 则是先根据类型选择子元素，然后直接选择对应序号的元素即可。
参考：https://juejin.im/post/59bce23c51882519777c5eb5
http://www.w3school.com.cn/cssref/selector_nth-child.asp
