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

Question

根据介绍，我们可以在jQuery中使用大量CSS选择器，但:nth-last-child()此处未提及。但是，当我测试以下内容（使用Google的jQuery1.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在所有浏览器上都支持此类选择器？

Answer 1

尽管jQuery在其主页上宣传了对选择器3级标准的符合性，但它并未完全实现该规范。在其自己的选择器文档中，它阐明了它是“从CSS1–3借用]，然后[添加]自己的”选择器。

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

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

• jQuery无法解析动态伪类，例如:link/，:visited用于超链接和:hover，:active以及:focus用于用户交互。后一组伪类尤其基于状态，而不是基于事件，因此当元素 进入 和 离开 这些状态时，您需要使用事件处理程序而不是伪类来运行代码。

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

以下级别3选择器在jQuery1.9和更高版本中实现，但 在 jQuery1.8或更高版本2中未实现：

• [: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首先将选择器字符串传递给本机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版本的兼容性的同时增加了对以上选择器的支持，因此，如果需要兼容性，最好至少更新到该版本。

1 它确实支持:contains()，最后一次在规范的旧CR修订版中定义，之后又删除，以及:not()从该标准扩展。涵盖了jQuery的实现与当前标准之间的差异。

2 在jQuery的早期开发过程中，还将删除其他一些选择器（例如+和和~兄弟组合器:empty，:lang()以及一些CSS2属性选择器），只是因为JohnResig认为没有人会使用它们。在进行了更多测试之后，几乎所有人都进入了最终版本。:lang()如上所述，它是唯一一个从未在1.9之前发布任何版本的版本。