jQuery真正支持什么CSS3选择器,例如:nth-last-child()



根据http://api.jquery.com/category/selectors/我们可以在jQuery中使用大量的CSS选择器,但没有提到:nth-last-child()。然而,当我测试以下内容(使用谷歌的jQuery 1.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在所有浏览器上都支持这样的选择器?

虽然jQuery在其主页上宣传遵守Selectors级别3标准,但它并没有完全实现规范。在其自己的Selectors文档中,它澄清了它"[借用]CSS 1-3,然后[添加]自己的"选择器1

从jQuery1.9开始,Sizzle(其底层选择器库)几乎支持级别3标准中的所有选择器,但以下例外:

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

  • jQuery无法解析动态伪类,例如用于超链接的:link/:visited,以及用于用户交互的:hover:active:focus。特别是后一组伪类是基于状态的,而不是基于事件的,因此当元素进入离开这些状态时,需要使用事件处理程序而不是伪类来运行代码。有关解释,请参阅此答案。

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

以下3级选择器在jQuery 1.9及更新版本中实现,但不是jQuery 1.8或更新版本2

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

另外:

  • CSS2中引入的:lang()也缺失

您的选择器在Firefox、Chrome和IE9中工作的原因是,jQuery在返回Sizzle之前,首先将选择器字符串传递给本机document.querySelectorAll()实现。由于它是一个有效的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属性选择器)也将被删除,只是因为John Resig认为没有人会使用它们。在进行了更多的测试后,几乎所有的测试都进入了最终版本。如上所述,:lang()是唯一一个在1.9之前从未发布过的版本

相关内容

最新更新