jQuery 中 “nth-child()” 和 “nth-of-type()” 选择器的区别

在 jQuery 中，使用选择器来选择元素是非常常见的操作。在选择器中，有两种比较相似的选择器，都是用来选择元素的第 n 个子元素的，它们分别是 “nth-child()” 和 “nth-of-type()” 选择器。它们的区别在于：

• “nth-child()” 选择器从选定元素的所有子元素中选择第 n 个子元素，不管它的标签名是什么。
• “nth-of-type()” 选择器从选定元素的所有指定类型的子元素中选择第 n 个子元素。

下面举个例子来说明它们的区别。

<div>
   <p>第一个段落</p>
   <span>第一个 span 元素</span>
   <p>第二个段落</p>
   <span>第二个 span 元素</span>
   <p>第三个段落</p>
   <span>第三个 span 元素</span>
</div>

如果我们要选择这个 div 元素下的第二个子元素，那么就要使用选择器 “:nth-child(2)” 或者 “:nth-of-type(2)”（注意，这里的数字是从 1 开始计数的）。我们来看看这两个选择器的结果：

• “:nth-child(2)”

$("div :nth-child(2)").css("background-color", "yellow");

结果是选择了第二个子元素，也就是第一个 p 元素，以及第二个 span 元素。这是因为在 div 元素下，第二个子元素是一个 p 元素，第三个子元素是一个 span 元素，所以这个选择器选择了两个子元素。

• “:nth-of-type(2)”

$("div :nth-of-type(2)").css("background-color", "yellow");

结果是选择了第二个子元素，也就是第二个 span 元素。这是因为我们指定了选择的是类型为 span 的子元素，在这个 div 元素下面类型为 span 的子元素只有两个，所以这个选择器只会选择一个子元素。

因此，总结一下，“nth-child()” 和 “nth-of-type()” 选择器的不同点：

• “nth-child()” 选择器选择的是元素的所有子元素中第 n 个子元素，不管它的标签名是什么。
• “nth-of-type()” 选择器选择的是元素的所有指定类型的子元素中第 n 个子元素。