不jQuery的真正支持什么CSS3选择器,如:第n-最后一个孩子()?(What CSS3 sel

2019-06-17 14:38发布

据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支持这种选择?

Answer 1:

虽然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

另外:

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

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

在该事件document.querySelectorAll()失败,jQuery将自动回落喜人景象。 有许多原因可能导致它失败的情况:

  • 选择器是无效的,不支持,否则无法使用(见选择器API规范的详细信息)。

  • document.querySelectorAll()不支持自己的方法(jQuery的实际上一个简单的测试,这个if语句,因此不会在这个词的这个意义上说失败 ,但你得到的图片)。

在你的情况,虽然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()?