jQuery真正支持哪些CSS3选择器，例如：nth-​​last-child（）？

Question

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

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

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

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

Answer 1

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

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

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

• jQuery无法解析动态伪类，例如:link / :visited for hyperlinks和:hover ， :active和:focus for user interaction。 后一组伪类特别是基于状态而不是基于事件的，因此当元素进入和离开这些状态时，您需要使用事件处理程序而不是伪类来运行代码。 请参阅此答案以获得解释。

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

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

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

另外：

• :lang()在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版本的兼容性，因此如果您需要兼容性，最好至少更新到该版本。

---

¹ _{它支持:contains() ，最后在规范的旧CR修订版中定义，然后再删除，以及从标准扩展:not() 。 这个问题涵盖了jQuery实现与当前标准之间的差异。}

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