CSS ul li: избежание двойных границ

Question

У меня есть UL с

border: 1px solid grey;

, он содержит несколько LI с

border-bottom: 1px dotted grey;

для визуального разделения предметов.Но теперь последний LI имеет пунктирную границу и сплошную границу UL!Это выглядит раздражающим.Как я могу избежать этого?Есть ли способ поставить границы между LI, а не после них?

Answer 1

Селекторы CSS3 могут предназначаться для :first-child или :last-child, например:

ul {
    border: 1px solid grey;
}
li {
    border-bottom: 1px dotted grey;
}
li:last-child {
    border:none;
}

Рабочий пример: http://api.fatherstorm.com/test/4165384.php

Answer 2

Простое решение - использовать селектор plus (+) для стилизации списка:

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

Вы просто добавляете следующий css :

li + li {
     border-top: 1px dotted grey;
}

Вы избегаете добавления дополнительного селектора и можете сохранить код более чистым.Хотя в зависимости от ваших потребностей вы можете сначала проверить совместимость браузера .

Answer 3

Используйте класс или селектор CSS3 :last-child, чтобы удалить последние <li> border-bottom

ul li:last-child { border-bottom:0; }

или

<ul>
    <li>1</li>
    <li>2</li>
    <li class="last">3</li>
</ul>

ul li.last { border-bottom:0; }

Answer 4

Просто добавьте другой класс к последнему li, который указывает не показывать границу.