CSS选择器 低版本IE浏览器的兼容

 CSS 后代选择器很好用，让我们的工作变的更方便。但是 IE8 及以下对很多后代选择器并不兼容。

例如这6个比较常用的后代选择器：

IE9 对这些后代选择器都兼容，IE8、IE7除了 :first-child ，其他5个都不兼容。  

例如：让第2个 p 标签变成“蓝色”字体。

常用的方法：

div p:nth-child(2) {
    color: blue;
}

或者：

div p:nth-of-type(2) {
    color: blue;
}

这样就能给第2个 p 标签添加颜色了。

如果要兼容IE：

第一种方法：

div > p:first-child + p {
    color: blue;
}

第二种方法：使用JQuery

if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器
    if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
        $('p:nth-child(2)').css('color','blue');
    }
}

JQuery也可以用 :nth-child(odd) 奇数，:nth-child(odd)  偶数 来处理。

列表边框问题：

选择最后一个元素：

一般 last-child 都是用在菜单或者列表用边框分隔的时候，把最后面一个border的设定去掉。

一种方法是给最后一项添加一个 class ，例如 .last-child ，把 border 的值设为 none 。（这个不便于数据绑定，不然又得判断最后一个，麻烦）。

一种方法是通过 js 把最后最后一项的边框值去掉，达到 last-child 的目的：

if ($('html').hasClass('lt-ie9')) {
    $('[data-fix-last-child]').each(function () {
        var $me = $(this);
        var element = $me.data('fix-last-child');
        $me.find(element).last().css({ 'border': 'none','background': 'none' });
    });
}

但是上面两种方法都是所有浏览器下都生效，也就是不用 last-child 都可以了。当然也可以判断是IE678的时候才使用上面的方法，但没什么必要。

还有一种方法是使用：

expression(this.nextSibling==null?'0':'1px');

没试过，因为不支持IE8。

纯css2方法：从第二个开始选择

有一种很简单的方法，纯CSS实现。

就是使用 element+element 即一个元素紧接着另一个元素选择器。因为 last-child 元素是没有紧跟这的元素的， element+element 为CSS2选择器。

举个栗子：

我们希望在每条记录之间加上分隔符，一般会加 border-bottom 属性，但是最后一个 <li> 下面不能有，我们可以使用 li+li 选择符，改用 border-top 属性即可实现。

li+li{border-top: 1px dotted #999;}

未经允许不得转载：w3h5 » CSS选择器 低版本IE浏览器的兼容