在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;}

效果图:
图片描述

相关文章
|
3天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
8 1
|
20天前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
17 1
|
28天前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
|
2月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
59 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
2月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
39 3
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
72 2
|
2月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
835 1
|
2月前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
33 1
|
2月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
42 1
|
2月前
|
前端开发 C++
CSS【详解】 标准盒模型 VS IE 盒模型
CSS【详解】 标准盒模型 VS IE 盒模型
26 0