在IE678下解决伪类last-child的css2方法-阿里云开发者社区

开发者社区> 微个日光日> 正文

在IE678下解决伪类last-child的css2方法

简介: <p style="margin-top:18px; margin-bottom:18px; color:rgb(51,51,51); font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,STHeiti,'Microsoft Yahei',sans-serif; font-size:14px; line-height:22.39
+关注继续查看

开始我是有找下解决的方法。
一般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选择器。
举个栗子:

<ul>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
</ul>

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

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

效果图:
图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9943 0
firefox chrome ie9,10,11 不支持selectSingleNode和selectNodes的解决方法
firefox并不支持selectSingleNode和selectNodes的解决方法 function test(){ var perid = document.
1061 0
Assembly.LoadFrom加载程序集类型转换失败解决方法
为了让我的wcf模块框架支持自定义通道上下文,对代码又进行了一次小型的重构,测试时发现类型转换的错误,最后发现是loadfrom引起的。如果向 loadfrom 上下文中加载了一个程序集,则将激活 loadfromcontext 托管调试助手 (mda)。
1007 0
Runtime.getRuntime().exec(...),参数带有空格的解决方法
      今天在做用java自带的包来调用bat文件,当文件路径不带空格是执行正常,如下所示的情况是正常的: String command = "D:\\l\\phonemodel.bat";//exe,bat文件名OR DOS命令 Process proc = Runtime.
1537 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13690 0
Installation error: INSTALL_FAILED_UPDATE_INCOMPATIBLE解决方法
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/51885960 问题复现: ...
820 0
175
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载