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

基本语法

:nth-child(an+b) 选择符匹配有父元素、前面有 an+b-1 个兄弟元素的元素。

element:nth-child(an + b) { style properties }

:nth-of-type 选择符匹配有父元素、前面有 an+b-1 个同名兄弟元素的元素。

element:nth-of-type(an + b) { style properties }

其中 a 和 b 为整数，元素的索引从 1 开始。更多细节参考 MDN :nth-child、:nth-of-type。

以下面的 HTML 为例：

<section>
   <p>Little</p>
   <p>Piggy</p>    <!-- 目标元素 -->
</section>

对于子元素都是标签都相同的，下面的代码都能正确选择目标元素。

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

上面看不出二者的区别，调整一下 HTML 试试：

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- 目标元素 -->
</section>

这个没选到目标元素：

p:nth-child(2) { color: red; } /* 选错了 */

这个选到了：

p:nth-of-type(2) { color: red; } /* 选到目标元素了 */

调整以后的 HTML 可以看出两者的区别。

:nth-child 选择符：

:nth-of-type 选择符：

如果 <h1> 后面添加一个非 p 元素， p:nth-child(2) 将匹配不到任何元素。

在特定的结构（dl, ul, ol, table）中使用 :nth-child 选择符，推荐不限制元素标签。

dl :nth-child(2) {  } /* 推荐 */
dd:nth-child(2) {  } /* 不推荐 */

知道二者的区别后，就可以根据具体的需求使用相应的选择符了。Demo @ JSFiddle