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

开始我是有找下解决的方法。
一般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;}

效果图:

时间: 2024-12-31 21:08:58

在IE678下解决伪类last-child的css2方法的相关文章

图解css3:核心技术与案例实战. 2.8 结构伪类选择器

2.8 结构伪类选择器 伪类可以将一段并不存在的HTML当作独立元素来定位,或是找到无法使用其他简单选择器就能定位到的切实存在的元素.因此CSS3给伪类选择器引入一种"结构伪类选择器".这种选择器可以根据元素在文档树中的某些特性(如相对位置)定位到它们.也就是说,通过文档树结构的相互关系来匹配特定的元素,从而减少HTML文档对ID或类名的定义,帮助你保持代码干净和整洁. 2.8.1 重温HTML的DOM树 所有的结构伪类都是基于HTML文档树的,也称做文档对象模型(DOM),下面简单回

CSS3伪类选择器:nth-child()用法详解

CSS3的出现无疑给前端开发人员带来了巨大的优势,今天我们着重介绍CSS3中一个新出现的强大伪类选择器:nth:child():为了方便大家理解,我今天会通过展示曾经做过的项目页面,让大家直观清晰的了解这一伪类选择器的功能和使用技巧   1.首先大家了解下该伪类的语法法:       :nth-child(an+b) ps:可惜的是该伪类选择器不支持ie浏览器,当要兼容ie浏览器的时候,我们只有每一个li给它们添加类名了 2.这是我们要实现的页面效果   步骤一: 先写好html代码 <div

CSS入门:伪类——动态链接

css|动态|链接 伪类--动态链接 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: value}(选择符:伪类 {属性: 值})伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪

详细讲解CSS特殊选择符伪类的应用技巧

css|技巧 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: value}(选择符:伪类 {属性: 值})伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式. 类选择符及

CSS语法基础:伪类—动态链接

css|动态|链接|语法 伪类--动态链接 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selector:pseudo-class {property: value}(选择符:伪类 {属性: 值})伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态

CSS中的伪类:动态链接

伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class): selector:pseudo-class {property: value} (选择符:伪类 {属性: 值}) 伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式. 类选择符及其他选择

css 伪类——动态链接

伪类--动态链接 伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果. 1. 语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class): selector:pseudo-class {property: value} (选择符:伪类 {属性: 值}) 伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式.

封装-Constants类里面的变量和方法应该如何理解?

问题描述 Constants类里面的变量和方法应该如何理解? 一般在一个工程里,我们会建一个util文件夹,会把Constants类放在此文件夹下,Constants类里面的变量和方法应该如何理解呢? 一般在此类里面,我们的写法是: public static final String URL = "url"; public static void deleteFaceSignTempFile(String fileName) { String filePath = Constants

解决IE7以下版本不支持无A状态伪类的几种方法!

在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考. 方法一 javascript文件,来自Htmldog .   function suckerfish(type, tag, parentId) { if (window.attachEvent) { window.attachEvent("onload", function() { var sfEls = (parentId==