:nth() 选择器是什么?
与其他答案相反,不是:nth()CSS伪类选择器。
这是Sizzle 引擎中使用的一个鲜为人知的位置选择器:
:nth:查找nth页面上的元素。
您可以在Sizzle 的 Github 文档中找到上述定义。
为什么选择不同的元素来:nth-child()/:nth-of-type()?
nth()和您的其他选择器选择不同元素的原因是因为它nth()是从零开始的索引选择器,而 CSS 选择器是从一开始的索引选择器。
这是可以理解的,因为大多数人会认为这nth()会与类似名称的 CSS 伪类选择器保持某种一致性,例如nth-child()和nth-of-type()- 然而,如前所述,它们实际上并不相关。
那么,:nth() 的功能实际上更接近于 :eq() 吗?
是的。事实上,似乎nth() 与 eq() 完全相同:
Expr.pseudos["nth"] = Expr.pseudos["eq"];
这个旧的邮件列表对话(2007)暗示 John Resig 计划删除:nth()选择器,因为:
“我已经搜索了这些组,但似乎找不到任何相关的讨论。使用:eq(n)和
之间有什么区别(如果有的话) :nth(n)?我想在开始对其中一个进行标准化之前知道。谢谢。” - 马特·彭纳
“它们是相同的,所以你可以使用你喜欢的任何一个。来自 jquery.js:nth: "m[3]-0==i", eq: "m[3]-0==i"” - Karl Swedberg
“嗯……我应该核弹吧:nth()。” - 约翰·雷西格
但是,正如您所注意到的,:nth()选择器的删除从未实现(无论如何,截至 2013 年)。
示例用法:
HTML:
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
jQuery:
$('p:nth(2)').text(); // Returns 3 as zero-based index.
$('p:eq(2)').text(); // Returns 3 as zero-based index.
$('p:nth-child(2)').text(); // Returns 2 as one-based index.
$('p:nth-of-type(2)').text(); // Returns 2 as one-based index.
jsFiddle 版本在这里。