Mein Ziel ist es, das CSS auf das letzte anzuwenden li, aber das tut es nicht.
#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>Wie kann ich nur das letzte Kind auswählen ?
Antworten:
Die :last-childPseudoklasse kann immer noch nicht zuverlässig in allen Browsern verwendet werden. Insbesondere Internet Explorer - Versionen <9 und Safari <3.2 auf jeden Fall unterstützen es nicht , obwohl Internet Explorer 7 und Safari 3.2 tun Unterstützung :first-childneugierig.
Am besten fügen Sie last-childdiesem Element explizit eine (oder eine ähnliche) Klasse hinzu und wenden sie li.last-childstattdessen an.
:last-child .
Eine andere Lösung, die für Sie funktionieren könnte, besteht darin, die Beziehung umzukehren. Sie würden also den Rahmen für alle Listenelemente festlegen. Sie würden dann das erste Kind verwenden, um den Rand für das erste Element zu entfernen. Das erste Kind wird in allen Browsern statisch unterstützt (dh es kann nicht dynamisch über anderen Code hinzugefügt werden, das erste Kind ist jedoch ein CSS2-Selektor, während das letzte Kind in der CSS3-Spezifikation hinzugefügt wurde).
Hinweis: Dies funktioniert nur so, wie Sie es beabsichtigt haben, wenn Sie nur 2 Elemente in der Liste haben, wie in Ihrem Beispiel. Auf alle dritten Elemente und höher werden Rahmen angewendet.
Wenn Sie der Meinung sind, dass Sie Javascript verwenden können, können Sie seit der Unterstützung von last-childjQuery die CSS-Methode von jQuery verwenden, und das Gute daran ist, dass fast alle Browser unterstützt werden
Beispielcode:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Weitere Informationen finden Sie hier: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')damit Sie Ihr Styling in Ihren Stylesheets behalten können.
div:last-childals als auch enthält div.last-child. Es scheint, dass die :last-childSyntax ungültig ist und keine Klasse mit diesem Pseudo-Selektor angewendet wird.
Wenn die Anzahl der Listenelemente festgelegt ist, können Sie den nebenstehenden Selektor verwenden. Wenn Sie beispielsweise nur drei <li>Elemente haben, können Sie das letzte auswählen <li>mit:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liwählt liinnen aus #nav, was danach kommt li. Ihr Selektor sollte einfach sein #nav li + li + li.
Wenn Sie häufig CSS3-Selektoren benötigen, können Sie jederzeit die selectivizr-Bibliothek auf Ihrer Site verwenden:
Es ist ein JS-Skript, das Browsern, die sie sonst nicht unterstützen würden, Unterstützung für fast alle CSS3-Selektoren hinzufügt.
Werfen Sie es <head>mit einer IE-Bedingung in Ihr Tag:
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->Die Pseudoklasse des letzten Kindes funktioniert im IE nicht
Alternativ zur Verwendung einer Klasse können Sie eine detaillierte Liste verwenden, in der die untergeordneten dt-Elemente einen Stil und die untergeordneten dd-Elemente einen anderen Stil haben. Ihr Beispiel würde werden:
#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>Keine Methode ist besser als die andere und es liegt nur an den persönlichen Vorlieben.
Warum nicht den Rand am unteren Rand des UL anbringen?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomauf dem <ul>Element oder margin-bottomauf dem letzten <li>Element haben, hat dies nicht die gewünschte Platzierung direkt unter dem letzten <li>Element. Ansonsten ist dies eine gute Lösung.
Wenn Sie die Elemente schweben lassen, können Sie die Reihenfolge umkehren
dh float: right;stattfloat: left;
Verwenden Sie dann diese Methode, um das erste untergeordnete Element einer Klasse auszuwählen.
/* 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;
}Dies wendet die Klasse tatsächlich nur auf die LAST-Instanz an, da sie jetzt in umgekehrter Reihenfolge vorliegt.
Hier ist ein Arbeitsbeispiel für Sie:
<!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>Es ist schwer zu sagen, ohne den Rest Ihres CSS zu sehen, aber versuchen Sie, es !importantvor der Rahmenfarbe hinzuzufügen , damit es so aussieht:
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
:last-child. Und es ist nicht so neugierig.:first-childist eine CSS2-Pseudoklasse,:last-childeine CSS3-Pseudoklasse.