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>
Ответы
Ответ 1
Если это проблема с не селектором, вы можете установить все из них и переопределить последний
li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}
или если вы можете использовать это раньше, нет необходимости в last-child
li+li:before
{
content: '| ';
}
Ответ 2
Кажется, что все кажется правильным. Возможно, вы захотите использовать следующий селектор css вместо того, что вы использовали.
ul > li:not(:last-child):after
Ответ 3
Ваш пример как написанный отлично работает в Chrome 11 для меня. Возможно, ваш браузер просто не поддерживает селектор :not()
?
Для выполнения этого кросс-браузера может потребоваться использовать JavaScript или аналогичный. jQuery реализует : not() в своем API-интерфейсе.
Ответ 4
Пример использования CSS
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
Ответ 5
Для меня это нормально работает
&:not(:last-child){
text-transform: uppercase;
}
Ответ 6
Ваш образец не работает в 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 позаботится о совместимости.
Ответ 7
Удалите: before last-child и: after и used
ul li:not(last-child){
content:' |';
}
Надеюсь, это должно работать
Ответ 8
Вы можете попробовать это, я знаю, это не ответы, которые вы ищете, но концепция та же самая.
Где вы устанавливаете стили для всех дочерних элементов, а затем удаляете их из последнего дочернего элемента.
Фрагмент кода
li
margin-right: 10px
&:last-child
margin-right: 0
Образ
![enter image description here]()