Selectivizr：让IE6~IE8支持CSS3高级选择器

[梁少峰]

问题

IE6~IE8不支持CSS3的高级选择器，比如nth-child()，nth-of-type()等等，非常的不方便，selectivizr帮我们完成了这件事情。

解决方案

1. 使用方法

// index.html
<link rel="stylesheet" href="/css/index.css"/>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>7</td>
    <td>8</td>
  </tr>
</table>

<script src="/js/jquery-1.12.0.js"></script>
<script src="/js/selectivizr2.js"></script>

// index.css
tr:nth-child(3){
    background-color: red;
  }

2. 结果

IE8下效果

3. 必须要注意的事情

1. 原库selectivizr已经很久没有人维护了，而且也没有bower版本，使用起来很不方便。所以有了fork版本selectivizr2
2. selectivizr必须搭配下面js库的任意一个使用。

• jQuery (1.3+)
• Dojo (1.5.0+)
• Prototype (1.6.1+)
• Yahoo UI Library (2.8.0+)
• DOMAssistant (2.8.0+)
• MooTools (1.3+)
• NWMatcher (1.2.3+)

3.样式必须是link:css引入的，不能是行内样式，也不能是内联样式。因为selectivizr的工作原理是**通过ajax请求css文件，然后重新解析css文件，然后操作DOM元素添加上相应的类名。**如下图所示。

4.由于css文件是ajax请求得来的，由于js同源策略的限制，css请求的位置必须跟html页面同域。（media.xxx.com和www.xxx.com不是同域）这个问题比较严重，因为在大型网站中，为了加快网页响应速度，一般都会通过多级域名加快静态资源下载速度。或许可以用跨域的思路来解决它，有待研究。

[yolo]

这么暴力！！……不过我喜欢。

使用Iframe加载静态文件，然后再做如上处理如何？（……不过我讨厌iframe……尴尬了）