Можно ли объединить псевдоклассы css3:after и:lastchild?
У меня есть список ссылок, и я использую следующий код, чтобы поставить слово после каждого элемента ссылки:
a:after {content: "eg"}
Однако я не хочу, чтобы контент располагался после последнего элемента в списке, поэтому в идеале я хотел бы сказать что-то вроде
a:last-child:after {content: ""}
но это лишает контент, который идет после всех ссылок. Есть ли способ объединить эти два? Если есть и вы можете объяснить, что именно происходит, я был бы очень признателен:)
Спасибо
5 ответов
Попробуй это:
HTML:
<ul>
<li><a href="#">Check this out</a></li>
<li><a href="#">Check this out</a></li>
<li><a href="#">Check this out</a></li>
</ul>
CSS:
a:after {content: "what what"}
li:last-child > a:after {content: ""}
Вот скрипка для демонстрации.
Кроме того, имейте в виду, что если у вас много пользователей, использующих IE7 и IE8, :after псевдо-класс не работает в IE7 и ниже, а :last-child псевдо класс не работает в IE8 и ниже. Смотрите здесь: http://www.quirksmode.org/css/contents.html
У меня сработала следующая комбинация селекторов:
#myObj ul li:last-child::after { . . . }
Я бы сделал это с помощью комбинации :not, :last-child а также :after, С :not(:last-child) Вы выбираете каждую ссылку, кроме последней: http://jsfiddle.net/2CS9G/
a:not(:last-child):after{
content: "--";
}
Если твой aТэги в списке (ul): http://jsfiddle.net/2CS9G/2/
li:not(:last-child) a:after{
content: "--";
}
У меня работает> ссылка
Возможно, вы забыли добавить display: block к a,
Этот комментарий от "Delphi" помогает? ( /questions/15585076/kak-ya-mogu-vyibrat-vse-dochernie-elementyi-krome-poslednego/15585089#15585089
Использование решения Ника Крейвера с selectivizr позволяет использовать кросс-браузерное решение (IE6+)