【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

《未完》