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超链接和:hover,:active和:focus用于用户交互.后一组伪类特别是基于状态而不是基于事件的,因此当元素进入和离开这些状态时,您需要使用事件处理程序而不是伪类来运行代码.请参阅此答案以获得解释.

• 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中引入,也缺失了.

您的选择器似乎在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之前没有进入任何版本的版本.}