: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 版本在这里。