jQuery真正支持哪些CSS3select器,例如:nth-​​last-child()?

根据http://api.jquery.com/category/selectors/,我们可以在jQuery中使用大量的CSSselect器,但是例如:nth-last-child()在那里没有提到。 然而,当我testing以下(与从谷歌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 }并以某种方式注入它,然后在支持使用select器的浏览器上正常工作。 但那会很奇怪。

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

虽然jQuery在其主页上宣称符合Selectors 3级标准,但并没有完全实现规范。 在其自己的select器文档中,它阐明了它“从[1-3]中借用,然后[添加]自己的”select器“。 1

从jQuery 1.9开始,3级标准中几乎所有的select器都被Sizzle (它的底层select器库)支持,但有以下几点例外:

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

  • jQuery无法parsingdynamic伪类,例如:link / :visited超链接:visited:hover:active:focus为用户交互。 后一组伪类尤其是基于状态的而不是基于事件的,所以当元素进入离开这些状态时,需要使用事件处理程序而不是伪类来运行代码。 看到这个答案的解释。

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

以下3级select器在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

另外:

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

select器在Firefox,Chrome和IE9中工作的原因是因为jQuery首先将select器string传递给本地document.querySelectorAll()实现,然后返回到Sizzle。 由于它是一个有效的CSSselect器, document.querySelectorAll()将成功返回jQuery使用的节点列表,从而避免使用Sizzle。

document.querySelectorAll()失败的情况下,jQuery会自动回退到Sizzle。 有很多情况可能会导致失败:

  • select器无效,不受支持,否则无法使用(有关详细信息,请参阅select器API规范 )。

  • document.querySelectorAll()方法本身是不支持的(jQuery实际上用一个简单的if语句来testing它,所以它不会在这个单词的意义上失败 ,但你得到的图片)。

在你的情况下,虽然IE9和IE8实现document.querySelectorAll() ,IE8不支持:nth-last-child() 。 由于jQuery / Sizzle没有实现:nth-last-child() ,所以没有使用回退行为,导致IE8完全失败。

如果你至less不能将jQuery更新到1.9(向后兼容的版本分支),你总是可以使用自定义select器扩展来自己实现缺less的伪类。 但是,由于jQuery 1.9增加了对上述select器的支持,同时保持了与旧IE版本的兼容性,所以如果你需要兼容性的话,最好把它更新到最低版本。


1 支持:contains() ,最后在规范的旧版本的CR修订版中定义,之后再放弃,以及从标准扩展:not() 这个问题涵盖了jQuery实现和当前标准之间的区别。

2 在jQuery的早期开发过程中,其他一些select器(比如+~兄弟组合器, :empty:lang()以及一些CSS2属性select器)也会被丢弃,只是因为John Resig不认为有人会使用他们 。 几乎所有的人都在进行了更多的testing之后才将其发布到最终版本。 :lang()如上所述, :lang()是唯一一个从未在1.9之前发布的版本。