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

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

IE6、IE7不支持 first-child 属性，不过可以用其他办法替代。

#sidebar li:first-child{
  border-top-style:none; 
} 
#sidebar li{ 
  border-top:1px solid #DAD3D0; 
  *border-top-style:expression(this.previousSibling==null?"none":"solid");
}

代码解析

*border-top-style:expression(this.previousSibling==null?’none’:"solid’);

只有IE6和IE7能识别此行代码，第一个值’none’就是first-child的值，第二个值’solid’则是其他元素的值。

last-child原理相同，代码如下

#sidebar li:last-child{
  border-bottom-style:none; 
} 
#sidebar li{ 
  border-bottom:1px solid #DAD3D0; 
  *border-bottom-style:expression(this.nextSibling==null?"none":"solid"); 
}

现在，IE6和IE7是不是相当于实现了first-child的功能了，CSS就是那么强大！

但此方法不支持IE8，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的时候才使用上面的方法，但没什么必要。

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

效果图：