16

:nth伪类的定义是什么?

我在上面找不到任何 jQuery 或 CSS 文档,但它似乎存在:

var $list = $('<ul><li>1</li><li>2</li><li>3</li></ul>');

$list.find('li:nth(2)').text();

返回:"3",

尽管:

 $list.find('li:nth-of-type(2)').text();
 $list.find('li:nth-child(2)').text();

两者都返回"2"

这个伪类是什么?有人可以指点我一些关于它的文件吗?

4

1 回答 1

22

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

于 2013-06-29T17:15:22.827 回答