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之前发布的版本。