Моя цель - применить 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>Псевдокласса :last-child по-прежнему не может быть надежно использована в браузерах. В частности, версии Internet Explorer < 9, и Safari < 3.2 определенно не поддерживает его, хотя Internet Explorer 7 и Safari 3.2 поддерживают :first-child, с любопытством.
Лучше всего явно добавить класс last-child (или аналогичный) этому элементу и применить вместо него li.last-child.
Другим решением, которое может сработать для вас, является изменение отношения. Таким образом, вы должны установить границу для всех элементов списка. Затем вы использовали бы первого ребенка для устранения границы для первого элемента. Первый-ребенок статически поддерживается во всех браузерах (это означает, что он не может динамически добавляться через другой код, но first-child - это селектор CSS2, тогда как последний-последний был добавлен в спецификации CSS3)
Примечание. Это работает только так, как вы планировали, если у вас есть только 2 элемента в списке, например, ваш пример. Любой третий элемент и он будут иметь к ним границы.
Если вы считаете, что можете использовать Javascript, то, поскольку поддержка jQuery last-child, вы можете использовать jQuery css-метод и хорошо, что он будет поддерживать почти все браузеры
Пример кода:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})
Дополнительную информацию можно найти здесь: http://api.jquery.com/css/#css2
Если количество элементов списка исправлено, вы можете использовать смежный селектор, например. если у вас есть только три элемента <li>, вы можете выбрать последний <li> с помощью:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}
Если вы часто обращаетесь к селекторам CSS3, вы всегда можете использовать библиотеку selectivizr на своем сайте:
Это JS script, который добавляет поддержку почти всем селекторам CSS3 для браузеров, которые в противном случае не поддерживали бы их.
Вставьте его в тэг <head> с условием IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
псевдо-класс last-child не работает в IE
В качестве альтернативы использованию класса вы можете использовать подробный список, установив для дочерних элементов dt один стиль, а дочерние элементы dd - другой. Ваш пример:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}
HTML:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>
Ни один из методов не лучше другого, и это зависит от личных предпочтений.
Другой способ сделать это - использовать селектор last-child в jQuery, а затем использовать метод .css(). Утомляйтесь, хотя некоторые люди все еще находятся в каменном веке с помощью браузеров с отключенным JavaScript.
Почему бы не применить границу к нижней части UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}
Если вы плаваете с элементами, вы можете отменить порядок
то есть. float: right; вместо float: left;
И затем используйте этот метод для выбора первого-младшего класса.
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}
Это фактически применяет класс к экземпляру LAST только потому, что теперь он находится в обратном порядке.
Вот вам рабочий пример:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
Трудно сказать, не видя остальную часть вашего CSS, но попробуйте добавить !important перед цветом рамки, чтобы сделать это так:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}