Моя мета - застосувати 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-childPseudoclass до сих пір не може бути надійно використовуватися у всіх браузерах. Зокрема, Internet Explorer версії <9 і Safari <3,2 безумовно не підтримують його , хоча Internet Explorer 7 і Safari 3.2 роблять підтримку:first-child , як не дивно.
Ваша найкраща ставка - явно додати last-childцей елемент (або подібний) до цього елемента та застосувати його li.last-child.
:last-child .
Ще одне рішення, яке може допомогти вам, - це переломити відносини. Таким чином, ви б встановили межу для всіх елементів списку. Потім ви будете використовувати первістка для усунення кордону для першого пункту. Первістка підтримується статично у всіх браузерах (це означає, що вона не може бути додана динамічно через інший код, але перша дитина - це селектор CSS2, тоді як остання дитина була додана в специфікації CSS3)
Примітка. Це працює лише так, як ви задумали, якщо у списку є лише 2 пункти, наприклад ваш приклад. Будь-який 3-й пункт і далі буде застосовано до них межі.
Якщо ви думаєте, що ви можете використовувати Javascript, то оскільки підтримує jQuery last-child, ви можете використовувати метод css jQuery і добре, що він підтримуватиме майже всі браузери.
Приклад коду:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Докладнішу інформацію можна знайти тут: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')щоб ви могли зберегти свій стиль у своїх таблицях стилів.
div:last-childі div.last-child. Схоже, він вважає :last-childсинтаксис недійсним і будь-який клас із цим псевдоселектором не застосовуватиметься.
Якщо кількість елементів списку виправлено, ви можете використовувати сусідній селектор, наприклад, якщо у вас є лише три <li>елементи, ви можете вибрати останній за <li>допомогою:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liвибирає liвсередину, #navщо надходить після li. Ваш вибір повинен бути просто #nav li + li + li.
Якщо вам часто потрібні селектори CSS3, ви завжди можете використовувати бібліотеку selectivizr на своєму сайті:
Це сценарій JS, який додає підтримку майже всіх селекторів CSS3 до браузерів, які б інакше не підтримували їх.
Закиньте його у свій <head>тег за допомогою умовного IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->Псевдоклас останніх дітей не працює в 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>Жоден метод не є кращим, ніж інший, і це лише до особистих уподобань.
Чому б не застосувати кордон на дні UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomна <ul>елементі або margin-bottomна останньому <li>елементі, це не матиме бажаного розміщення прямо під останнім <li>елементом. В іншому випадку це хороше рішення.
Якщо ви плаваєте елементи, ви можете змінити порядок
тобто 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;
}Це насправді застосовується клас до Останнього екземпляра лише тому, що він зараз у зворотному порядку.
Ось робочий приклад для вас:
<!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;
}
:last-child. І це не що цікаво.:first-childце псевдоклас CSS2, псевдоклас:last-childCSS3.