请解释 :nth-child 和 :nth-of-type 的区别，并举例说明。

推荐答案

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。而 :nth-of-type(n) 选择器匹配属于其父元素的第 n 个 特定类型 的子元素。

简单来说:

• :nth-child 关心的是子元素在父元素中的位置顺序。
• :nth-of-type 关心的是子元素在同类型子元素中的位置顺序。

举例:

<div class="container">
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <span>Span 2</span>
</div>

// www.javascriptcn.com code example
.container p:nth-child(2) { /* 不会选中任何元素，因为第二个子元素是 <span> */
  color: red;
}

.container p:nth-child(3) { /* 选中 Paragraph 2 */
  color: blue;
}

.container p:nth-of-type(2) { /* 选中 Paragraph 2 */
  color: green;
}

.container span:nth-of-type(2) { /* 选中 Span 2 */
  font-weight: bold;
}

本题详细解读

理解 :nth-child()

:nth-child(n) 选择器接收一个参数 n，该参数可以是一个数字、一个关键词 (even 或 odd) 或者一个形如 an+b 的公式。它根据元素在其父元素所有子元素中的位置进行匹配。

• 位置计数: 它会把父元素的所有子元素都纳入计数范围，不论这些元素的类型是什么。
• 选择目标: 它只会选择那些 恰好 是指定位置的元素。

例如：

• li:nth-child(3)：选择 li 标签，该标签必须是其父元素的第三个子元素（无论是 li，还是别的标签）。
• div:nth-child(even)：选择所有 div 标签，这些 div 标签必须是其父元素的偶数位置子元素。

理解 :nth-of-type()

:nth-of-type(n) 选择器也接收一个参数 n，用法与 :nth-child 相同。但是，它只计算 同类型 的子元素，然后在其位置上进行选择。

• 类型计数: 它只统计父元素中特定类型的子元素。
• 选择目标: 它会选择那些 在同类型子元素中 处于指定位置的元素。

例如：

• p:nth-of-type(2)：选择 p 标签，该标签必须是其父元素中第二个 p 标签（只计算父元素中的所有 p 标签）。
• span:nth-of-type(odd)：选择所有 span 标签，这些 span 标签必须是其父元素中奇数位置的 span 标签。

区分二者

两者最根本的区别在于计数范围：

• :nth-child 对所有子元素计数（无视类型），并根据位置选择。
• :nth-of-type 只对同类型的子元素计数，并根据同类型的位置选择。

因此，当父元素包含不同类型的子元素时， :nth-child 和 :nth-of-type 的选择结果会大相径庭。 只有在父元素的所有子元素都是同一类型时，它们的结果才会相同。

总结（无需）