426 Stimmen

Armand avatar

Wie kann ich gerade und ungerade Elemente gestalten?

Gefragt el 22 de Februar, 2011
Wann wurde die Frage gestellt
523537 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ist es möglich, CSS-Pseudoklassen zu verwenden, um gerade und ungerade Instanzen von Listenelementen auszuwählen?

Ich würde erwarten, dass das folgende eine Liste mit wechselnden Farben ergibt, aber stattdessen erhalte ich eine Liste mit blauen Elementen:

<html>
    <head>
        <style>
            li { color: blue }
            li:odd { color:green }
            li:even { color:red }
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
Gefragt el 22 de Februar, 2011 von Armand

Antworten

Zu viele Anzeigen?

846voto

thirtydot avatar
thirtydot Punkte 218830

Demo: http://jsfiddle.net/thirtydot/K3TuN/1323/

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

Dokumentation:

Beantwortet el 22 de Februar, 2011 von thirtydot (218830 Punkte )

68voto

Kevin Gurney avatar
Kevin Gurney Punkte 1291

Das Problem mit Ihrem CSS liegt in der Syntax Ihrer Pseudoklassen.

Die geraden und ungeraden Pseudo-Klassen sollten sein:

li:nth-child(even) {
    color:green;
}

und

li:nth-child(odd) {
    color:red;
}

Demo: http://jsfiddle.net/q76qS/5/

Beantwortet el 22 de Februar, 2011 von Kevin Gurney (1291 Punkte )

28voto

Dan S avatar
Dan S Punkte 775

Verwenden Sie dies:

li { color:blue; }
li:nth-child(odd) { color:green; }
li:nth-child(even) { color:red; }

Informationen zur Browserunterstützung finden Sie hier: http://kimblim.dk/css-tests/selectors/

Beantwortet el 22 de Februar, 2011 von Dan S (775 Punkte )

14voto

Minh_Bu avatar
Minh_Bu Punkte 105

Aber im IE funktioniert es nicht.

Empfehlen Sie die Verwendung von :nth-child(2n+1) :nth-child(2n+2)

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
Beantwortet el 26 de Dezember, 2018 von Minh_Bu (105 Punkte )

7voto

Minh_Bu avatar
Minh_Bu Punkte 105

Die css ungerade und gerade ist keine Unterstützung für IE. empfehlen Sie mit Lösung unten.

Beste Lösung:

li:nth-child(2n+1) { color:green; } // for odd
li:nth-child(2n+2) { color:red; } // for even

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }

<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>
Beantwortet el 26 de Dezember, 2018 von Minh_Bu (105 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

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:

Yandex
X