Ich habe eine Liste von Elementen, die so gestaltet sind:
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline;
}
li:not(:last-child):after {
content:' |';
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Ausgänge One | Two | Three | Four | Five |
stattOne | Two | Three | Four | Five
Weiß jemand, wie man CSS alle außer dem letzten Element auswählt?
Die Definition des :not()
Selektors sehen Sie hier
css
css-selectors
pseudo-element
Matt Clarkson
quelle
quelle
Antworten:
Wenn es ein Problem mit dem Nicht-Selektor gibt, können Sie alle einstellen und den letzten überschreiben
oder wenn Sie vorher verwenden können, brauchen Sie kein letztes Kind
quelle
li:not(:first-child):before
ist ein bisschen zu beängstigend für die älteren Versionen von Internet Explorer.Alles scheint richtig zu sein. Möglicherweise möchten Sie den folgenden CSS-Selektor anstelle des von Ihnen verwendeten verwenden.
quelle
Ihr Beispiel wie geschrieben funktioniert in Chrome 11 perfekt für mich. Vielleicht unterstützt Ihr Browser den
:not()
Selektor einfach nicht ?Möglicherweise müssen Sie JavaScript oder ähnliches verwenden, um diesen browserübergreifenden Vorgang auszuführen. jQuery implementiert : not () in seiner Selektor-API.
quelle
li:not(:first-child):before
den vertikalen Balken hinzugefügt habe. Ich habe mit der stabilen Version von Chrome gearbeitet, die das letzte Kind nicht zu unterstützen scheint. Der kanarische Bau tut es. Danke für die Antwort tho.Ein Beispiel mit CSS
quelle
Für mich funktioniert es gut
quelle
Ihr Beispiel funktioniert in IE nicht für mich. Sie müssen in Ihrem Dokument den Doctype-Header angeben , um Ihre Seite im IE auf standardmäßige Weise zu rendern und die CSS-Eigenschaft content zu verwenden:
Der zweite Weg ist die Verwendung von CSS 3-Selektoren
Sie müssen jedoch weiterhin Doctype angeben
Und die dritte Möglichkeit besteht darin, JQuery mit einem Skript wie dem folgenden zu verwenden:
Der dritte Weg hat den Vorteil, dass Sie keinen Doctype angeben müssen und jQuery für die Kompatibilität sorgt.
quelle
Entfernen Sie das: vor dem letzten Kind und das: nach und verwendet
Hoffentlich sollte es funktionieren
quelle
Sie können dies versuchen, ich weiß, es sind nicht die Antworten, die Sie suchen, aber das Konzept ist das gleiche.
Hier legen Sie die Stile für alle untergeordneten Elemente fest und entfernen sie dann aus dem letzten untergeordneten Element.
Code-Auszug
Bild
quelle