Moim celem jest zastosowanie CSS na końcu li, ale tak się nie dzieje.
#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>Jak mogę wybrać tylko ostatnie dziecko?
Odpowiedzi:
:last-childPseudoclass nadal nie można wiarygodnie wykorzystane w różnych przeglądarkach. W szczególności wersje Internet Explorer <9 i Safari <3,2 pewno nie wspierają go , choć Internet Explorer 7 i Safari 3.2 zrobić wsparcia :first-child, z zaciekawieniem.
Najlepszym rozwiązaniem jest jawne dodanie last-child(lub podobnej) klasy do tego przedmiotu i zastosowanie li.last-childzamiast tego.
:last-child .
Innym rozwiązaniem, które może Ci się przydać, jest odwrócenie relacji. Więc ustawiasz obramowanie dla wszystkich elementów listy. Następnie użyłbyś first-child, aby usunąć obramowanie dla pierwszego przedmiotu. Pierwsze dziecko jest obsługiwane statycznie we wszystkich przeglądarkach (co oznacza, że nie może być dodawane dynamicznie przez inny kod, ale pierwsze dziecko jest selektorem CSS2, podczas gdy ostatnie dziecko zostało dodane w specyfikacji CSS3)
Uwaga: Działa to tak, jak zamierzałeś, tylko wtedy, gdy masz na liście tylko 2 elementy, takie jak przykład. Każda trzecia i następna pozycja będzie miała zastosowane obramowanie.
Jeśli myślisz, że możesz używać Javascript, to od czasu obsługi jQuery last-childmożesz użyć metody css jQuery i dobrze, że będzie ona obsługiwać prawie wszystkie przeglądarki
Przykładowy kod:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Więcej informacji na ten temat można znaleźć tutaj: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child'), żebyś mógł zachować swój styl w swoich arkuszach stylów.
div:last-childi div.last-child. Wygląda na to, że uważa :last-childskładnię za niepoprawną i żadna klasa z tym pseudo-selektorem nie zostanie zastosowana.
Jeśli liczba elementów listy jest stała, możesz użyć sąsiedniego selektora, np. Jeśli masz tylko trzy <li>elementy, możesz wybrać ostatni za <li>pomocą:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liwybiera liwnętrze, #navktóre nastąpi później li. Twój selektor powinien po prostu być #nav li + li + li.
Jeśli często potrzebujesz selektorów CSS3, zawsze możesz skorzystać z biblioteki selectivizr w swojej witrynie:
Jest to skrypt JS, który dodaje obsługę prawie wszystkich selektorów CSS3 do przeglądarek, które inaczej by ich nie obsługiwały.
Wrzuć to do swojego <head>tagu za pomocą warunku IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->Pseudoklasa last-child nie działa w IE
Alternatywnie do używania klasy możesz użyć szczegółowej listy, ustawiając elementy potomne dt tak, aby miały jeden styl, a elementy potomne dd, aby miały inny. Twój przykład wyglądałby następująco:
#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>Żadna metoda nie jest lepsza od drugiej i zależy to tylko od osobistych preferencji.
Dlaczego nie zastosować obramowania do spodu UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomna <ul>elemencie lub margin-bottomna ostatnim <li>elemencie, nie będzie to miało pożądanego umieszczenia tuż pod ostatnim <li>elementem. W przeciwnym razie jest to dobre rozwiązanie.
Jeśli pływasz elementami, możesz odwrócić kolejność
to znaczy float: right; zamiastfloat: left;
Następnie użyj tej metody, aby wybrać pierwsze dziecko klasy.
/* 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;
}W rzeczywistości jest to stosowanie tej klasy tylko do OSTATNIEJ instancji, ponieważ jest teraz w odwrotnej kolejności.
Oto działający przykład:
<!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>Trudno powiedzieć, nie widząc reszty CSS, ale spróbuj dodać !importantkolor przed obramowaniem, aby wyglądało tak:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
:last-child. I to nie jest takie ciekawe.:first-childjest pseudoklasą CSS2, pseudoklasą:last-childCSS3.