Удалить последнюю границу-дно?

Question

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

У каждого li есть нижняя граница: 1px сплошной черный;

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

пример:

.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;
        border-bottom: 1px solid black;
    }

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

ul.test> li: последний из типа { нет границы дна: нет }

Answer 5

Пожалуйста, добавьте класс к этому:

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