CSS: not (: last-child): после выбора

У меня есть список элементов, которые оформлены так:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Выходы One | Two | Three | Four | Five | One | Two | Three | Four | Five | вместо One | Two | Three | Four | Five One | Two | Three | Four | Five

Кто-нибудь знает, как CSS выбрать все, кроме последнего элемента?

Вы можете увидеть определение селектора :not() здесь

+265
27 мар. '11 в 14:31
источник поделиться
7 ответов

Если это проблема с не селектором, вы можете установить все из них и переопределить последний

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

или если вы можете использовать это раньше, нет необходимости в last-child

li+li:before
{
  content: '| ';
}
+356
16 мар. '12 в 12:03
источник

Кажется, что все кажется правильным. Возможно, вы захотите использовать следующий селектор css вместо того, что вы использовали.

ul > li:not(:last-child):after
+178
17 июн. '13 в 10:06
источник

Ваш пример как написанный отлично работает в Chrome 11 для меня. Возможно, ваш браузер просто не поддерживает селектор :not()?

Для выполнения этого кросс-браузера может потребоваться использовать JavaScript или аналогичный. jQuery реализует : not() в своем API-интерфейсе.

+23
27 мар. '11 в 14:47
источник

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

Второй способ - использовать селектор CSS 3

li:not(:last-of-type):after
{
    content:           " |";
}

Но вам все равно нужно указать Doctype

И третий способ - использовать JQuery с некоторым script следующим образом:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

Преимущество третьего способа заключается в том, что вам не нужно указывать doctype, а jQuery позаботится о совместимости.

+10
27 мар. '11 в 15:28
источник

Пример использования CSS

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }
+10
26 июл. '17 в 20:57
источник

Для меня это нормально работает

&:not(:last-child){
            text-transform: uppercase;
        }
0
14 дек. '18 в 12:44
источник

Вы можете попробовать это, я знаю, это не ответы, которые вы ищете, но концепция та же самая.

Где вы устанавливаете стили для всех дочерних элементов, а затем удаляете их из последнего дочернего элемента.

Фрагмент кода

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Образ

enter image description here

-3
06 июл. '18 в 6:53
источник

Посмотрите другие вопросы по меткам или Задайте вопрос