2012-07-31 112 views
11

根据http://api.jquery.com/category/selectors/我们可以在jQuery中使用大量的CSS选择器,那里没有提到:nth-last-child()。然而,当我测试以下(使用jQuery 1.7.1从谷歌),但实际上,而不是在IE 8仿真模式IE 9作用于火狐,Chrome和IE 9:jQuery真正支持哪些CSS3选择器:第n-最后孩子()?

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

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

最重要的是,是否有一些技巧让jQuery支持所有浏览器上的这种选择器?

回答

34

尽管jQuery在其home page上宣称符合Selectors level 3标准,但它并未完全实现该规范。在它自己的Selectors文档中,它阐明它“从CSS 1-3中”[借用],然后[添加]自己的“选择器”。

从jQuery的1.9开始,实质上在水平3标准中的所有选择器由Sizzle(其基础选择器库)的支持,但有以下例外:

以下3级选择are implemented in jQuery 1.9 and newer,但的jQuery 1.8或以上:

此外:

  • :lang(),在CSS2推出,也不翼而飞。

为什么你选择出现在Firefox中工作的原因,Chrome和IE9是因为jQuery首先经过选择的字符串到本地document.querySelectorAll()实施回落喜人景象了。由于它是一个有效的CSS选择器,document.querySelectorAll()将成功返回jQuery使用的节点列表,从而避免使用Sizzle。

如果document.querySelectorAll()失败,jQuery会自动回退到Sizzle。有许多的场景,可能会导致它失败:

  • 的选择是无效的,不支持,否则无法使用(见Selectors API spec了解详细信息)。

  • 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(),在this old CR revision of the spec后来被丢弃,以及从标准延伸:not()前的最后定义。在this question中涵盖了jQuery实现和当前标准的区别。

一些其他的选择(如+~兄弟组合程序,:empty:lang()和一些CSS2的属性选择)就要被jQuery的早期发育过程以及下降,只是因为John Resig didn't think anybody would use them。几乎所有的人都在进行了更多的测试之后才进入最终版本。如上所述,:lang()是唯一一个从未在1.9之前发布过的版本。

+1

当然,应该指出的是,jQuery选择可以使用扩展:'$ .expr [ ':'] [ '第n个最后一个孩子'] =函数(){...};' – zzzzBov 2012-07-31 17:09:12

+0

@ zzzzBov:感谢您的提醒!我已经提到,在编辑中,现在我正试图想出自己的实现... – BoltClock 2012-07-31 17:43:25

+0

@BoltClock它在http://api.jquery.com/nth-of-type-选择器/ _it“[借用]从CSS 1-3,然后[添加]自己的”选择器._ – 2013-01-21 09:28:29