首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS选择器 低版本IE浏览器的兼容

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

作者头像
德顺
发布2019-11-13 17:15:49
2.4K1
发布2019-11-13 17:15:49
举报
文章被收录于专栏:前端资源前端资源

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

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

Child Selectors

IE9

IE8

IE7

:first-child

:last-child

×

×

:nth-child(n)

×

×

:nth-last-child(n)

×

×

:first-of-type(n)

×

×

:first-last-of-type(n)

×

×

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;}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-07-05),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档