Моя цель - применить CSS к последнему li
, но он этого не делает.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>
Как выбрать только последнего ребенка?
css
css-selectors
Miral
источник
источник
:last-child
. И это не что любопытно.:first-child
это псевдокласс CSS2, псевдокласс:last-child
CSS3.:last-child
.Еще одно решение, которое может сработать для вас, - это изменить отношения. Таким образом, вы должны установить границу для всех элементов списка. Затем вы должны использовать first-child, чтобы удалить границу для первого элемента. Первый дочерний элемент статически поддерживается во всех браузерах (это означает, что он не может быть добавлен динамически через другой код, но первый дочерний элемент является селектором CSS2, тогда как последний ребенок был добавлен в спецификации CSS3)
Примечание. Это работает только так, как вы планировали, если у вас есть только 2 элемента в списке, как в вашем примере. К любому третьему элементу и далее будут применены границы.
источник
Если вы думаете, что можете использовать Javascript, то, поскольку поддержка jQuery
last-child
, вы можете использовать метод css jQuery, и, что хорошо, он будет поддерживать почти все браузеры.Пример кода:
Вы можете найти больше информации здесь: http://api.jquery.com/css/#css2
источник
$("#nav li:last-child").addClass('last-child')
чтобы сохранить стиль в таблицах стилей.div:last-child
иdiv.last-child
. Похоже, что он считает:last-child
синтаксис недопустимым, и любой класс с этим псевдоселектором не будет применяться.Если количество элементов списка фиксировано, вы можете использовать соседний селектор, например, если у вас всего три
<li>
элемента, вы можете выбрать последний<li>
с помощью:источник
li + #nav li
выбираетli
внутри,#nav
что идет послеli
. Ваш селектор должен быть просто#nav li + li + li
.Если вам часто нужны селекторы CSS3, вы всегда можете использовать библиотеку selectivizr на своем сайте:
http://selectivizr.com/
Это JS-скрипт, который добавляет поддержку почти всех селекторов CSS3 в браузеры, которые иначе не поддерживали бы их.
Добавьте его в свой
<head>
тег с условным IE:источник
Псевдокласс last-child не работает в IE
Совместимость с CSS и Internet Explorer
Селекторы CSS IE7: как они терпят неудачу
источник
В качестве альтернативы использованию класса вы можете использовать подробный список, задав для дочерних элементов dt один стиль, а для дочерних элементов dd - другой. Ваш пример станет:
html:
Ни один из методов не лучше другого, и это зависит только от личных предпочтений.
источник
Другой способ сделать это - использовать селектор last-child в jQuery, а затем использовать метод .css (). Однако будьте утомлены, потому что некоторые люди все еще находятся в каменном веке, используя браузеры с отключенным JavaScript.
источник
Почему бы не применить границу к нижней части UL?
источник
padding-bottom
на<ul>
элементе илиmargin-bottom
на последнем<li>
элементе, это не будет иметь желаемого размещению прямо под последний<li>
элемент. В остальном это хорошее решение.Если вы перемещаете элементы, вы можете изменить их порядок
т.е.
float: right;
вместоfloat: left;
А затем используйте этот метод, чтобы выбрать первого ребенка класса.
Фактически это применяет класс к ПОСЛЕДНЕМУ экземпляру только потому, что теперь он работает в обратном порядке.
Вот вам рабочий пример:
источник
Трудно сказать, не видя остальной части вашего CSS, но попробуйте добавить
!important
перед цветом границы, чтобы получилось так:источник