nth-child(odd) funktioniert nicht wie erwartet

Warum muss jede Zeile einen roten hintergrund wenn ich mit nth-child(odd)?

<div id="ClientTable">
    <div class="ClientTableHeaderRow"><span class="ClientTableHeaderColumn">Full Name</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
    <div class="ClientTableRow"><span class="ClientName">Umpa Beeson</span></div>
</div>​
#ClientTable    {position: relative;
                 display: table;
                 margin-top: 20px;
                 width: 100%;}

#ClientTable:nth-child(odd) {background-color:#FF0000;}                 

.ClientTableHeaderRow, .ClientTableRow {display: table-row; }
.ClientTableHeaderRow {font-weight: bold;}
.ClientTableHeaderRow span, .ClientTableRow span {display: table-cell;}​

Ansicht die jsFiddle

Das erwartete Ergebnis ist jede zweite Zeile rot werden. Statt, wie Sie sehen können, jede Zeile ist rot.

P. S. Umpa ist meine Katze.

  • Wow, epic Bearbeiten. Danke @animuson. Ich werde versuchen Ausführlicher ist hier die nächste Zeit.
InformationsquelleAutor Devil's Advocate | 2012-03-23
  1. 7

    Sollten Sie die Einstellung ClientTableRow - Klasse, etwa so:

    .ClientTableRow:nth-child(odd) {background-color:#FF0000;}

    Demo: http://jsfiddle.net/gMR2K/4/

    BEARBEITEN

    Als auch erklärt, durch animuson, Sie müssen, um die :nth-child - Selektor auf das element selbst, nicht die Eltern. Den Namen des Selektors, kann man denken, dass er für das styling der Kinder des ausgewählten Elements, wenn tatsächlich der Stil angewendet wird, der n-te Kind des ausgewählten Elements auf das gesamte Dokument.

    Auch, wenn Sie besorgt sind über browser-Kompatibilität Sie können dies auch mit JavaScript. Hier ein Beispiel mit jQuery.

    $(document).ready()
{
    $(".ClientTableRow:nth-child(odd)").addClass("redBackground");
}

    Demo: http://jsfiddle.net/gMR2K/10/

    Wie gesagt hier von BoltClock: jQuery "polyfills das :nth-child () - Selektor für ältere Browser sowieso."

    • Das macht null Sinn in meiner Welt... aber es funktioniert. :\
    • Sehen Animuson Antwort, er hat einen guten job im erklären es 🙂
    • Ja, ich verstehe es jetzt, aber es macht immer noch keinen Sinn (wenn das Sinn macht). 🙂
    • Beeson: :nth-child() ist eine pseudo-Klasse. Pseudo-Klassen anwenden, um Elemente in der gleichen Weise, dass IDs und der reguläre Unterricht tun ist: nicht um ein element der Kinder, sondern auf das element selbst.
    InformationsquelleAutor Telmo Marques
  2. 7

    nth-child gilt für das eigentliche element, nicht die Kinder. #ClientTable ist der 1. (und einzige Kind seiner Eltern. Also, es hat einen roten hintergrund. Sie müssen in der Anwendung des nth-child, um die Elemente innerhalb dieser Abteilung.

    InformationsquelleAutor animuson
  3. 1

    Ist dies das Ergebnis, die Sie wollen?:

    http://jsfiddle.net/gMR2K/6/

    #ClientTable div:nth-child(odd) {background-color:#FF0000;}
    InformationsquelleAutor adedoy
  4. 0

    und das funktioniert nur in den besseren Browser. IE 8 und unten nicht bekommen. Aber, können Sie mit jQuery zu machen, überall arbeiten oder (schmerzhaft) fügen Sie eine Klasse für die ungeraden Zeilen.

    • Ist ein Teil von deinem ersten Satz fehlt?
    InformationsquelleAutor kelly johnson
  5. 0

    In meinem Fall habe ich einen kleinen Fehler gemacht

    .someclassA .someclassB: nth-child(odd){
    Sie können sehen, wie erwähnt, es ist ein Leerzeichen zwischen someclassB: und das N-te Kind. das ist es.. Durch das löschen, der Raum begann es zu arbeiten 🙂

    InformationsquelleAutor enRaiser
Schreibe einen Kommentar