422 Stimmen

CSS :not(:last-child):after Selektor

Ich habe eine Liste von Elementen, die wie folgt 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 | 代わりに One | Two | Three | Four | Five

Weiß jemand, wie man mit CSS alle Elemente bis auf das letzte auswählen kann?

Sie können die Definition der :not() Selektor aquí

11voto

Martin Kunc Punkte 144

Ihr Beispiel funktioniert bei mir nicht im IE, Sie müssen Folgendes angeben Doctype-Kopfzeile in Ihrem Dokument, um Ihre Seite standardmäßig im IE zu rendern und die CSS-Eigenschaft content zu verwenden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

Die zweite Möglichkeit ist die Verwendung von CSS 3-Selektoren

li:not(:last-of-type):after
{
    content:           " |";
}

Sie müssen aber noch Doctype angeben

Und die dritte Möglichkeit ist die Verwendung von JQuery mit einem Skript wie dem folgenden:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

Der Vorteil des dritten Weges ist, dass Sie keinen Doctype angeben müssen und jQuery sich um die Kompatibilität kümmern wird.

-1voto

Jaylukmann Punkte 65

Entfernen Sie das : before last-child und das :after und verwenden Sie

 ul li:not(last-child){
 content:' |';
}

Hoffentlich sollte es funktionieren

-1voto

fahimeh ahmadi Punkte 639

Entfernen Sie das : before last-child und das :after und verwenden Sie

ul > li:not(:last-child):after {
   border-bottom: none !important;
}

-4voto

Yashu Mittal Punkte 1253

Sie können dies versuchen, ich weiß, ist nicht die Antworten, die Sie suchen, aber das Konzept ist das gleiche.

Sie legen die Stile für alle untergeordneten Elemente fest und entfernen sie dann aus dem letzten untergeordneten Element.

Code-Schnipsel

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Bild

enter image description here

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X