web-dev-qa-db-ger.com

Verwendung von CSS: gerade und ungerade Pseudoklassen mit Listenelementen

Ist es möglich, CSS-Pseudoklassen für Listenelemente zu verwenden?

Ich würde erwarten, dass Folgendes eine Liste mit abwechselnden Farben erzeugt, stattdessen bekomme 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>
htmlcsscss-selectors
249
Armand

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:

565
thirtydot

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

Die geraden und ungeraden Pseudoklassen sollten sein:

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

und

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

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

42
Kevin Gurney

Benutze das:

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/

18
Dan S

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>

Siehe Browserunterstützung hier: CSS3: nth-child () - Selector

3
iDaniel88

die css-ungerade und gerade unterstützt nicht den IE . Sie empfehlen die Verwendung der folgenden Lösung. 

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>
0
Minh_Bu

aber es funktioniert nicht im IE . empfehlen die Verwendung von : n-Kind (2n + 1)

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>

0
Minh_Bu