推荐答案
: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>
-- -------------------- ---- ------- ---------- -------------- - -- ------------------ ------ -- ------ ---- - ---------- -------------- - -- -- --------- - -- ------ ----- - ---------- ---------------- - -- -- --------- - -- ------ ------ - ---------- ------------------- - -- -- ---- - -- ------------ ----- -
本题详细解读
理解 :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 的选择结果会大相径庭。 只有在父元素的所有子元素都是同一类型时，它们的结果才会相同。