jQuery 真正支持哪些 CSS3 选择器，例如:nth-last-child()?

Posted 2023-03-06

【中文标题】jQuery 真正支持哪些 CSS3 选择器，例如:nth-last-child()?

【英文标题】：What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?

【发布时间】：2012-07-29 12:35:05

【问题描述】：

根据http://api.jquery.com/category/selectors/，我们可以在 jQuery 中使用大量的 CSS 选择器，但是例如那里没有提到:nth-last-child()。但是，当我测试以下内容时（使用来自 Google 的 jQuery 1.7.1），它实际上适用于 Firefox、Chrome 和 IE 9，但不适用于 IE 8 仿真模式下的 IE 9：

$('li:nth-last-child(2)').css('color', 'red');

那么发生了什么？看起来 jQuery 生成了 CSS 代码，例如 li:nth-last-child(2) color: red 并以某种方式注入了它，然后在支持使用的选择器的浏览器上运行正常。但这会很奇怪。

最重要的是，是否有一些技巧可以让 jQuery 在所有浏览器上都支持此类选择器？

【参考方案1】：

虽然 jQuery 在其 home page 上宣传符合 Selectors level 3 标准，但它并没有完全实现该规范。在它自己的Selectors 文档中，它阐明它“[借用] CSS 1-3，然后[添加]它自己的”选择器。¹

从 jQuery 1.9 开始，几乎所有 3 级标准中的选择器都被 Sizzle（其底层选择器库）支持，但以下情况除外：

jQuery 不能选择任何伪元素为they are CSS-based abstractions of the document tree that can't be expressed through the DOM。

jQuery 无法解析动态伪类，例如用于超链接的:link/:visited 和用于用户交互的:hover, :active and :focus。后一组伪类尤其是基于状态而不是基于事件的，因此当元素 enter 和 leave 这些状态。有关说明，请参阅 this answer。

jQuery 也无法解析namespace prefixes，因为它不支持namespacing in CSS。

以下 3 级选择器 are implemented in jQuery 1.9 and newer，但 不是 jQuery 1.8 或更早版本²：

:target :root :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-of-type

另外：

CSS2 中引入的:lang() 也不见了。

您的选择器似乎在 Firefox、Chrome 和 IE9 中工作的原因是 jQuery 在返回到 Sizzle 之前首先将选择器字符串传递给原生的 document.querySelectorAll() 实现。由于它是一个有效的 CSS 选择器，document.querySelectorAll() 将成功返回一个节点列表供 jQuery 使用，从而避免使用 Sizzle。

如果document.querySelectorAll() 失败，jQuery 会自动回退到 Sizzle。有多种情况可能导致它失败：

选择器无效、不受支持或无法使用（有关详细信息，请参阅Selectors API spec）。

不支持 document.querySelectorAll() 方法本身（jQuery 实际上用一个简单的 if 语句对此进行了测试，因此它不会 fail 在这个词的意义上，但你明白了)。

在您的情况下，虽然 IE9 和 IE8 实现了document.querySelectorAll()，但 IE8 不支持:nth-last-child()。由于 jQuery/Sizzle 也没有实现 :nth-last-child()，因此没有可使用的回退行为，导致 IE8 完全失败。

如果您至少无法将 jQuery 更新到 1.9（向后兼容的发布分支），您始终可以使用自定义选择器扩展来自己实现缺少的伪类。但是，由于 jQuery 1.9 在保持与旧 IE 版本的兼容性的同时增加了对上述选择器的支持，因此如果您需要兼容性，最好至少更新到该版本。

---

¹_{它确实支持:contains()，最后在this old CR revision of the spec 中定义，后来被删除，以及从标准扩展:not()。 this question 中介绍了 jQuery 的实现与当前标准之间的差异。}

²_{其他一些选择器（如 + 和 ~ 同级组合器、:empty、:lang() 和一些 CSS2 属性选择器）将被删除为在 jQuery 的早期开发过程中很好，只是因为 John Resig didn't think anybody would use them。在进行了更多测试后，几乎所有这些都进入了最终版本。如上所述，:lang() 是唯一一个从未在 1.9 之前发布过的版本。}

【讨论】：

当然，应该提到jQuery选择器可以使用：$.expr[':']['nth-last-child'] = function () ...;

@zzzzBov：谢谢提醒！我在编辑中提到过，现在我正在尝试提出自己的实现......

@BoltClock 它在api.jquery.com/nth-of-type-selector 中说它“[借用] CSS 1-3，然后[添加]它自己的”选择器。

@Royi Namir：我的答案中已经有链接指向它所说的位置。看起来 jQuery 1.9 增加了对其他选择器的支持，所以我稍后将不得不更新这个答案。