据http://api.jquery.com/category/selectors/我们可以使用大量的jQuery的CSS选择器,但如:nth-last-child()
是不是有提及。 然而,当我测试以下(使用jQuery 1.7.1从谷歌),但实际上,而不是在IE 8仿真模式IE 9作用于火狐,Chrome和IE 9:
$('li:nth-last-child(2)').css('color', 'red');
所以,发生了什么? 这看起来好像jQuery的生成CSS代码,像li:nth-last-child(2) { color: red }
并以某种方式注入它,然后工作在支持使用的浏览器选择OK。 但是,这将是奇数。
最重要的,是有一些技巧,使所有的浏览器的jQuery支持这种选择?
虽然jQuery的通告遵守选择器3级在其标准的主页 ,它没有完全实现规范。 在其自己的选择器的文档,它澄清说,它“[借鉴]从CSS 1-3,然后单击[添加]自己的”选择。 1
从jQuery的1.9开始,几乎在3级标准的所有的选择都受到支持灒 (其基础选择库),但下列情况除外:
jQuery的不能选择任何伪元素, 它们是文档树无法通过DOM来表达的基于CSS的抽象 。
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
另外:
为什么你的选择出现在Firefox中工作的原因,Chrome和IE9是因为jQuery首先经过选择的字符串到本地document.querySelectorAll()
实现回落喜人景象了。 由于它是一个有效的CSS选择器, document.querySelectorAll()
将成功返回一个节点列表jQuery的使用,从而避免使用的滋滋声。
在该事件document.querySelectorAll()
失败,jQuery将自动回落喜人景象。 有许多原因可能导致它失败的情况:
在你的情况,虽然IE9和IE8实施document.querySelectorAll()
,IE8不支持:nth-last-child()
由于jQuery的/灒没有实现:nth-last-child()
或者,有没有用,从而对IE8完全失效备用行为。
如果您无法连起码(向后兼容的版本分支)更新了jQuery 1.9,你可以随时使用自定义选择扩展自己实现丢失伪类。 然而,由于jQuery的1.9增加了对上述选择的支持,同时保持与老版本的IE浏览器的兼容性,最好是在最低限度,如果你需要的兼容性更新到该版本。
1 它支持:contains()
最后在定义规范的这个老CR修订后掉落,以及延长前:not()
从标准。 jQuery的执行情况和现行标准之间的差异都属于这个问题 。
2 其他一些选择(如+
和~
兄弟组合程序, :empty
, :lang()
和一些CSS2的属性选择)就要被jQuery的早期发育过程以及下降,只是因为约翰Resig的没想到有人会使用它们 。 几乎所有的人把它做成最终发行更多的测试都有了之后。 :lang()
是从未进入任何版本1.9之前,如上所述的唯一的一个。
文章来源: What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?