使用Selectivizr让你的 CSS3选择器 通吃IE6/7/8

说到HTML5，总是会让人不自觉的想到CSS3，貌似他们就应该是成双成对。OK！前几天和大家分享了《使用html5shiv让HTML5通吃IE6/7/8》，那今天，便再和大家分享一个能让HTML5的小老婆（CSS3选择器）也通吃IE6/7/8的方法。

Selectivizr是一个JS文件，你只需要引入如JQuery、Mootools、Prototype等N多流行的JS框架中的任意一个，然后再调用Selectivizr，就可以让IE6/7/8支持CSS3选择器。

从以下这张图表中你可以看到当前使用Selectivizr后每个JS框架对CSS3选择器的支持程度（Joomla用户表示很欣慰，Mootools全线飙绿啊！）。

来看看实际测试效果（IETester IE6及Chrome）：

 

再来看看实现的代码：

[cc lang="html"]

• dsfadfasdf
• 345435
• 7567
• 67567
• dfvcb
• sewer

[/cc]

[cc lang="css"]
ul li {width:200px; height:50px; background:#F2F2F2;}
ul li:nth-child(2) {background:#DDD;}
[/cc]

怎么样？实现方法还是很简单的吧，我这里只是抛砖引玉，例举了:nth-child选择器，大家可以亲自动手试试其它选择器哦！

另外，使用Selectivizr需要注意以下几点：

1. Selectivizr会自动检测最好的JS框架，如果你当前页面中正在使用如JQuery框架，但是它对Selectivizr的支持并不太好，你只需要在页面中再调用另一个（如Mootools）即可。
2. CSS样式必须使用<link>标签引入，还可以使用@import，但不能在页面里使用<style>来定义。
3. Selectivizr必须运行在标准模式，所以你要确保你又一个DTD在你的页面顶部。
4. 如果客户浏览器不支持JS，你只需要使用<noscript></noscript>就可以给它们单独写hack。
5. 不支持站外样式调用。

参考资料：

前端观察：有用的:nth-child秘方

Select[ivizr]：下载Selectivizr

腾讯ISD：CSS3中文手册