Как у меня есть граница внизу для всех, кроме последнего элемента

Если у меня есть ul, как установить нижнюю границу для всех элементов li, кроме последней? Я также пытаюсь сделать ширину border 180px. здесь мой код:

HTML

<ul class="sideNav">
  <li><a href="/history.asp">History</a></li>
  <li><a href="/mission.asp">Mission</a></li>
  <li><a href="/associations.asp">Associations</a></li>
  <li><a href="/careers.asp">Careers</a></li>
</ul>

CSS

.sideNav {
    margin:0;
    padding:0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    width:216px;
    background-color:#017dc6;
}

.sideNav li {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    width:180px;
}

.sideNav li a {
    border-bottom:1px solid #80bee3;
    width:180px;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:18px;
}

Ответы

Ответ 1

13 декабря 2018: обратите внимание, что в современных браузерах нет необходимости использовать это решение. Не стесняйтесь использовать ответ ниже моего li:not(:last-child) { border-bottom: 1px solid red; } li:not(:last-child) { border-bottom: 1px solid red; }

Без использования JavaScript и отсутствия необходимости поддерживать IE7 и ниже (IE8 не работает на втором), вы можете использовать три параметра :first-child :lastchild и селектор +:

:Первый ребенок

li { border-top: 1px solid red; }
li:first-child { border-top: none; }

:последний ребенок

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

+ селектор

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

Проблемы возникают, если вам нужна поддержка IE8, и ваш дизайн не позволяет вам поставить границу сверху ваших элементов, а не снизу.

РЕДАКТИРОВАТЬ: Исправление проблемы ширины в том, что вы добавляете 180px к 2 * 18px элемента a, удаляете левый правый отступ и устанавливаете padding: 18px 0; и ты будешь золотым (обновлено jsfiddle: http://jsfiddle.net/NLLqB/1/)

Вот jsfiddle этого: http://jsfiddle.net/NLLqB/

Ответ 2

Используйте :not(:last-child).

.sideNav li:not(:last-child) a {
    /* your css here */
}

Ответ 3

Один из способов: вы можете переопределить для последнего, используя правило, как показано ниже: : last-child ( Поскольку вы отметили css3):

.sideNav li:last-child a {
    border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}

Демо

Для IE8 доступны полисы, но если вы можете предоставить имя класса для последнего и применить к нему правило к reset, стиль будет иметь лучшую поддержку, а не использовать css3 (если вы намерены поддерживать более старые браузеры).

Если вы используете язык сценариев, например jquery, вы можете легко добавить класс к последнему ребенку, поскольку jquery заботится о совместимости с несколькими браузерами.

Ответ 4

Вы также можете использовать встроенный CSS для исправления этой проблемы.

<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>

Это приведет к удалению границы из ссылки "Карьера". Обратите внимание, что он будет работать, только если вы поместите этот код в тег <a>, так как это то, к чему применяется граница, а не <li>.

Недостатком этого является то, что если вы добавите что-то в список, то элемент второго-последнего списка не будет иметь нижней границы, а последний будет.

Не лучшее решение, но альтернативное, которое выполняет одно и то же. Ура!