jQuery真正支持的CSS3选择器，例如。 ：nth-​​last-child（）？ [英] What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?

问题描述

根据 http://api.jquery.com/category/selectors/ ，我们可以大量使用的CSS选择器在jQuery，但例如：nth-​​last-child（）没有提到。但是，当我测试以下（使用jQuery 1.7.1从谷歌），它实际上工作在Firefox，Chrome和IE 9，但不是在IE 9的IE 8仿真模式：

  $（'li：nth-​​last-child（2）'）css（'color'，'red'）; 
  

那么发生了什么？看起来好像jQuery生成的CSS代码，如 li：nth-​​last-child（2）{color：red} ，并以某种方式注入，然后在浏览器支持所使用的选择器。但是这很奇怪。

最重要的是，是否有一些技巧让jQuery在所有浏览器上支持这样的选择器？

解决方案

虽然jQuery广告符合选择器级别3 标准其主页，但并未完全实现规范。在其自己的 Selectors 文档中，它阐明了它从CSS 1-3中借用，然后[添加]自己选择器。 ¹

从jQuery 1.9开始，几乎所有的3级标准的选择器都支持 Sizzle （其基础选择器库），但有以下例外：

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




• jQuery无法解析动态伪类，例如 ：link / ：visited 超链接和 ：hover ，：active 和：focus 用于用户交互。后者的伪类特别是基于状态的，而不是基于事件的，所以你需要使用事件处理程序而不是伪类来运行代码，当元素 和离开这些状态。有关说明，请参见此答案。 / p>




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

以下3级选择器中实现了final-jquery-2-0-beta-migrate-final-released>，但是不是 jQuery 1.8或更早版本 ² ：

• ：target


• ：root


• ：nth-​​last-child（）


• ：nth-​​of-type（）


• ：nth-​​last-of-type（）


• ：first-of-type


• ：最后的类型


• ：only-of-type

：

• ：在CSS2中引入的lang（） 也缺失。

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

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

• 选择器无效，不支持，否则无法（详情请参阅 Selectors API规格）。




• document.querySelectorAll（）方法本身不被支持（jQuery实际上用一个简单的if语句来测试这个方法，所以它不会<

在你的情况下，尽管IE9和IE8实现 document.querySelectorAll（），IE8不支持：nth-​​last-child（）。由于jQuery / Sizzle不实现：nth-​​last-child（），因此没有回退行为要使用，导致IE8完全失败。

如果你不能将jQuery更新到1.9（即向下兼容的版本分支），你总是可以使用自定义选择器扩展来实现丢失的伪类自己。但是，由于jQuery 1.9添加了对上述选择器的支持，同时保持与旧IE版本的兼容性，如果您需要兼容性，最好更新到该版本。

< hr>

¹ _{它支持：contains（） href =http://www.w3.org/TR/2001/CR-css3-selectors-20011113>规范的这个旧的CR版本，稍后被删除，以及扩展：not（）。 jQuery的实现和当前标准之间的区别在这个问题。}

² _{c> + 和〜 sibling组合器，：empty ， ：lang（）和一些CSS2属性选择器）在jQuery的早期开发过程中也会被删除，因为 John Resig没有认为任何人会使用他们。几乎所有的人都做了最后的版本，经过一些更多的测试可用。 ：lang（）是唯一一个从未在1.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');

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.

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

解决方案

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.¹

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 cannot select any pseudo-elements as they are CSS-based abstractions of the document tree that can't be expressed through the DOM.

• 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 is also unable to resolve namespace prefixes since it does not support namespacing in CSS.

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

Additionally:

• :lang(), introduced in CSS2, is also missing.

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.

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:

• The selector is invalid, not supported, or otherwise cannot be used (see the Selectors API spec for details).

• 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).

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.

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.

---

¹ _{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.}

² _{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屋！