jQuery 真正支持什么 CSS3 选择器，例如:nth-last-child()? [英] What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?

问题描述

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

According to http://api.jquery.com/category/selectors/ we can use a large amount of CSS selectors in jQuery, but e.g. :nth-last-child() is not mentioned there. However, when I test the following (with jQuery 1.7.1 as from Google), it actually works on Firefox, Chrome, and IE 9, but not on IE 9 in IE 8 emulation mode:

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

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

So what’s happening? It looks as if jQuery generated CSS code, like li:nth-last-child(2) { color: red } and somehow injected it, which then works OK on browsers that support the selector used. But that would be odd.

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

Most importantly, is there some trick to make jQuery support such selectors on all browsers?

推荐答案

虽然 jQuery 宣传遵守 Selectors level 3 标准在其 主页 上，它没有完全实现规范.在它自己的 Selectors 文档中，它阐明了它[借用] CSS 1-3，然后 [添加] 自己的选择器.¹

While jQuery advertises compliance with the Selectors level 3 standard on its home page, it does not fully implement the spec. In its own Selectors documentation, it clarifies that it "[borrows] from CSS 1–3, and then [adds] its own" selectors.¹

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

Starting from jQuery 1.9, virtually all selectors in the level 3 standard are supported by Sizzle (its underlying selector library), with the following exceptions:

• jQuery 不能选择任何伪元素，因为 它们是 CSS无法通过 DOM 表达的基于文档树的抽象.

jQuery 无法解析动态伪类，例如 :link/:visited 用于超链接和 :hover, :active 和:focus 用于用户交互.后一组伪类尤其是基于状态而不是基于事件的，因此当元素 enter 和 leave<时，您需要使用事件处理程序而不是伪类来运行代码/em> 这些状态.请参阅此答案了解说明.

jQuery is unable to resolve dynamic pseudo-classes, such as :link/:visited for hyperlinks and :hover, :active and :focus for user interaction. The latter set of pseudo-classes in particular are state-based and not event-based, so you need to use event handlers rather than pseudo-classes to run code when elements enter and leave these states. See this answer for an explanation.

jQuery 也无法解析 命名空间前缀 因为它不支持 CSS 中的命名空间.

jQuery is also unable to resolve namespace prefixes since it does not support namespacing in CSS.

以下 3 级选择器 在 jQuery 1.9 和更新版本中实现，但不是 jQuery 1.8 或更早版本²:

The following level 3 selectors are implemented in jQuery 1.9 and newer, but not jQuery 1.8 or older²:

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

另外:

• :lang()，在 CSS2 中引入，也不见了.

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

The reason why your selector appears to work in Firefox, Chrome and IE9 is because jQuery first passes the selector string to the native document.querySelectorAll() implementation before falling back to Sizzle. Since it is a valid CSS selector, document.querySelectorAll() will successfully return a node list for jQuery to use, thereby obviating the use of Sizzle.

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

In the event that document.querySelectorAll() fails, jQuery automatically falls back to Sizzle. There are a number of scenarios that can cause it to fail:

• 选择器无效、不受支持或无法使用(参见 选择器 API 规范 了解详情).

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

The document.querySelectorAll() method itself is not supported (jQuery actually tests this with a simple if statement so it doesn't fail in that sense of the word, but you get the picture).

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

In your case, although IE9 and IE8 implement document.querySelectorAll(), IE8 doesn't support :nth-last-child(). Since jQuery/Sizzle doesn't implement :nth-last-child() either, there's no fallback behavior to use, resulting in complete failure on IE8.

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

If you're not able to update jQuery to 1.9 even at the very least (the backward-compatible release branch), you can always use the custom selector extensions to implement the missing pseudo-classes yourself. However, since jQuery 1.9 adds support for the above selectors while maintaining compatibility with old IE versions, it is best to update to that version at the very minimum if you need the compatibility.

¹ _{确实支持:contains()，最后定义在该规范的旧 CR 修订版 在稍后被删除之前，以及从标准扩展 :not().jQuery 的实现与当前标准之间的差异在 这个问题.}

¹ _{It does support :contains(), last defined in this old CR revision of the spec before being dropped later, as well as extending :not() from the standard. The differences between jQuery's implementation and the current standard are covered in this question.}

² _{一些其他选择器(例如 + 和 ~ 兄弟组合器，:empty, :lang() 和一些 CSS2 属性选择器)在 jQuery 的早期开发过程中也将被删除，只是因为 John Resig 认为没有人会使用它们.在进行了更多测试后，几乎所有这些都进入了最终版本.如上所述，:lang() 是唯一一个在 1.9 之前从未发布过的版本.}

² _{A few other selectors (like the + and ~ sibling combinators, :empty, :lang() and some CSS2 attribute selectors) were going to be dropped as well during jQuery's early development, just because John Resig didn't think anybody would use them. Almost all of them made it into the final release after some more tests were made available. :lang() was the only one that never made it into any release before 1.9, as stated above.}

这篇关于jQuery 真正支持什么 CSS3 选择器，例如:nth-last-child()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！