Il mio obiettivo è applicare il CSS sull'ultimo li, ma non lo fa.
#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>Come posso selezionare solo l'ultimo bambino?
Risposte:
La :last-childpseudoclasse non può ancora essere utilizzata in modo affidabile nei browser. In particolare, le versioni di Internet Explorer <9 e Safari <3.2 sicuramente non lo supportano , sebbene Internet Explorer 7 e Safari 3.2 lo supportino:first-child , curiosamente.
La soluzione migliore è aggiungere esplicitamente una last-childclasse (o simile) a quell'elemento e applicare li.last-childinvece.
:last-child .
Un'altra soluzione che potrebbe funzionare per te è invertire la relazione. Quindi imposterai il bordo per tutti gli elementi dell'elenco. Dovresti quindi utilizzare first-child per eliminare il bordo per il primo elemento. Il first-child è staticamente supportato in tutti i browser (il che significa che non può essere aggiunto dinamicamente tramite altro codice, ma first-child è un selettore CSS2, mentre last-child è stato aggiunto nella specifica CSS3)
Nota: funziona nel modo desiderato solo se nell'elenco sono presenti solo 2 elementi come il tuo esempio. Ogni terzo oggetto in poi avrà dei bordi applicati.
Se pensi di poter usare Javascript, allora poiché supporta jQuery last-child, puoi usare il metodo css di jQuery e la cosa buona che supporterà quasi tutti i browser
Codice di esempio:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Puoi trovare maggiori informazioni qui: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')così puoi mantenere il tuo stile nei fogli di stile.
div:last-childe div.last-child. Sembra che consideri la :last-childsintassi non valida e qualsiasi classe con quello pseudo-selettore non verrà applicata.
Se il numero di elementi della lista è fisso puoi usare il selettore adiacente, ad esempio se hai solo tre <li>elementi, puoi selezionare l'ultimo <li>con:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liseleziona l' liinterno #navche viene dopo li. Il tuo selettore dovrebbe semplicemente essere #nav li + li + li.
Se ti ritrovi a desiderare spesso i selettori CSS3, puoi sempre utilizzare la libreria selectivizr sul tuo sito:
È uno script JS che aggiunge il supporto per quasi tutti i selettori CSS3 ai browser che altrimenti non li supporterebbero.
Inseriscilo nel tuo <head>tag con una condizione IE:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->La pseudo classe last-child non funziona in IE
In alternativa all'utilizzo di una classe è possibile utilizzare un elenco dettagliato, impostando gli elementi figlio dt per avere uno stile e gli elementi figlio dd per averne un altro. Il tuo esempio diventerebbe:
#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>Nessuno dei due metodi è migliore dell'altro ed è solo una questione di preferenze personali.
Perché non applicare il bordo alla parte inferiore dell'UL?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomsul <ul>elemento o margin-bottoml'ultimo <li>elemento, questo non avrà il posizionamento desiderato di sotto a destra l'ultimo <li>elemento. Altrimenti, questa è una buona soluzione.
Se stai facendo fluttuare gli elementi, puoi invertire l'ordine
vale a dire float: right; invece difloat: left;
Quindi usa questo metodo per selezionare il primo figlio di una classe.
/* 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;
}Questo in realtà sta applicando la classe all'istanza LAST solo perché ora è in ordine inverso.
Ecco un esempio funzionante per te:
<!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>
:last-child. E non è così curioso.:first-childè una pseudo-classe CSS2,:last-childuna pseudo-classe CSS3.