如何去除最后一个li元素的border-bottom?

Question

html结构：

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

css:

li{
  border-bottom:1px solid #ddd;
}

需求：不使用css3中的选择器，兼容ie8。

Answer 1

按题干意思，应该是这样：

li{
  border-bottom:1px solid #ddd;
}
li:last-child{
  border-bottom:none;
}

不过根据实际需求，建议下面这种方式：

li + li{
  border-top:1px solid #ddd;
}

Answer 2

能给li加class吗？ 可已的话,可以利用一个class 配合 !important 属性修改.
li{
border-bottom:1px solid #ddd;
}
.lastLi{

border-bottom:none!important;

}

Answer 3

不是用css3，还要兼容ie8，如果数量确定就给最后一个li加一个class，然后设置{border:0;}，如果不确定数量就只能用js解决了，jq也比较简单：

$('ul li:last').css('border','0');

Answer 4

换个思路。用+相邻选择符选择器。兼容IE7+。推荐一篇文章：30个你必须记住的CSS选择符

<style>
li + li{
    border-top: 1px solid #ddd;
}
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

Answer 5

li是固定数量的

li+li{
    border-top:1px solid #ddd;
}

如果li是动态创建的话

li{
    border-bottom:1px solid #ddd;
}
li+li:last-child{
    border-bottom:0;
}