【CSS】nth-child 与 nth-of-type辨析
nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素，后者的字面意思是选择某类型的第几个元素。
首先来看他们的完整格式。
selector:nth-child(an+b) /* 如 tr:nth-child(3), p:nth-child(2n+1) */ selector:nth-of-type(an+b) /* 如 p:nth-of-type(3), .info:nth-of-type(2n) */
前面的选择器（selector）可以是标记类型（markup type）,也可以是样式（style）。后面的序列有不同的表达，n是从0开始数起，即0,1,2...，得出来的结果就是选中的序列。我们分开来一个个看。
先看selector部分。an+b我们先简化为一个数字，只选择第几个元素。
- p:nth-child(2) 和 .info:nth-child(2) 有什么不同
有如下HTML代码：
<div>
<p class="ph">ph1</p>
<p class="ph">ph2</p>
<p class="info">ph3</p>
<p class="info">ph4</p>
<p class="ph">ph5</p>
</div>那么上面两个css的结果如下
p:nth-child(2) { /* 样式生效，背景显示红色 */
background-color: red;
}
.info:nth-child(2) { /* 匹配不到元素，没有任何效果。你以为会匹配到<p class="info">ph4</p>,结果并没有 */
background-color: blue;
}解释：nth-child的查找步骤有两步：
1. 按序列因子找到对应子元素 2. 检查对应元素是否与selector匹配
第一步查找是按照序号绝对查找，写明是第几个子元素，就定位到第几个元素。nth-child(2)就是要找第二个子元素，也就是<p class="ph">ph2</p>
第二步检查selector是否匹配。<p class="ph">ph2</p>的类型是p，因此上面的第一个样式应用成功；class有一个类型是ph，但第二样式提供的是.info,不匹配。因此应用失败。
- p:nth-of-type(2) 和 .info:nth-of-type(2) 有什么不同
同样的HTML代码
<div>
<p class="ph">ph1</p>
<p class="ph">ph2</p>
<p class="info">ph3</p>
<p class="info">ph4</p>
<p class="ph">ph5</p>
</div>如下的两个样式
p:nth-of-type(2) { /* 样式生效，<p class="ph">ph2</p> 背景显示红色 */
background-color: red;
}
.info:nth-of-type(2) { /* 匹配不到元素，没有任何效果。你以为会匹配到<p class="info">ph4</p>,结果并没有 */
background-color: blue;
}解释：nth-of-type的查找过程也有两步：
1. 找出同标记类型下的第n个元素。 2. 找出匹配selector的元素。
nth-of-type(2)找的是同类型的第2个元素，这里只有一种类型p，因此找到的是<p class="ph">ph2</p>。那么p:nth-of-type(2)这个样式应用成功，因为<p class="ph">ph2</p>匹配seletor “p”。但是.info:nth-of-type(2)则应用失败，因为<p class="ph">ph2</p>的class里没有.info。
假设把HTML代码改一下，将第二个的类型改成别的，比如span，即
<div>
<p class="ph">ph1</p>
<span class="ph">ph2</spanp>
<p class="info">ph3</p>
<p class="info">ph4</p>
<p class="ph">ph5</p>
</div>那么.info:nth-of-type(2)就应用成功了，匹配到的是<p class="info">ph3</p>。它是第二个p类型元素，而且class包含.info
总结：
selector:nth-child(n) 找到这样的元素，它是第n个子元素，且匹配selector
selector:nth-of-type(n) 找到这样的元素，它是统一标记类型的第n个元素，且匹配selector
《未完》