Удалить последнее пограничное дно?

Question

Я использую li, чтобы показать список записей.

Каждый li имеет нижнюю границу: 1px сплошной черный;

но я не хочу показывать границу в конце ли?

пример:

.test li{ 
     height:1%; 
     overflow:hidden; 
     padding:4px 0; 
     margin:-1px 0 0; 
     border-bottom: 1px solid black; 
    } 

.test li.last { border-bottom: none; } 

<ul class="test"> 
    <li> Foo 1 </li> 
    <li> Foo 2 </li> 
    <li> Foo 3 </li> 
</ul> 

Foo 3 все еще показывает нижнюю границу.

Answer 1

Вы также можете установить верхняя граница вместо этого и использовать селектор родственный, чтобы справиться с этим без необходимости дополнительного класса:

.test li{ 
     height:1%; 
     overflow:hidden; 
     padding:4px 0; 
     margin:-1px 0 0; 
    } 

.test li + li { border-top: 1px solid black; } 

Answer 2

Добавьте класс литиево последнего или если css3 приемлемо

ul.test> ли: последний-оф-типа { пограничную-дно: ни один }

Answer 3

.test li{ 
     height:1%; 
     overflow:hidden; 
     padding:4px 0; 
     margin:-1px 0 0; 
     border-bottom: 1px solid black; 
    } 

.test li:last-child { border-bottom: none; } 

Answer 4

вы можете использовать JQuery слишком

$('ul li:last-child').css('border-bottom', 'none'); 

Я предпочитаю этот способ, так как это означает, что вы прыгаете и сумасшедшие странные исключения в вашем css.