/ CSS

: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 }
其中 ab 为整数,元素的索引从 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 选择符:

  • p 元素;
  • 是父元素的第二个子元素
:nth-of-type 选择符:
  • 父元素的第二个 p 元素(前面有一个兄弟 p 元素,而不管有多少非 p 元素)
如果 <h1> 后面添加一个非 p 元素, p:nth-child(2) 将匹配不到任何元素。

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

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

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

via The Difference Between :nth-child and :nth-of-type
more Meet the Pseudo Class Selectors