nth-child (странный) не работает должным образом

Question

Почему у каждой строки красный фон, когда я использую 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;}​

Просмотр jsFiddle

Ожидаемый результаткаждый второй ряд должен быть красным.Вместо этого, как вы можете видеть, каждая строка красного цвета.
PS Умпа - моя кошка.

Answer 1

nth-child применяется к фактическому элементу, а не к его дочерним элементам.#ClientTable является первым (и единственным) потомком своего родителя.Поэтому у него красный фон.Вам нужно применить nth-child к элементам внутри этого подразделения.

Answer 2

Вы должны установить класс ClientTableRow, например:

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

Демо: http://jsfiddle.net/gMR2K/4/

EDIT

Как также объясняет animuson, вам нужно применить селектор :nth-child к самому элементу, а не к родительскому элементу. Имя селектора может привести к тому, что он применит стилизацию к дочерним элементам выбранного элемента, когда фактически стиль применяется к n-му дочернему элементу выбранного элемента по всему документу.

Кроме того, если вы беспокоитесь о совместимости браузера, вы также можете сделать это с помощью JavaScript. Вот пример использования jQuery.

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

Демо: http://jsfiddle.net/gMR2K/10/

Как указано здесь от BoltClock: jQuery "в любом случае полифиллирует селектор: nth-child () для старых браузеров."

Answer 3

Это результат, который вы хотите?:

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

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

Answer 4

В моем случае я допустил небольшую ошибку

.someclassA .someclassB: nth-child (odd) {Как вы можете видеть выше, между someclassB: и nth-child есть один пробел.вот и все .. Удалив это пространство, он начал работать:)

Answer 5

, и это работает только в лучших браузерах. IE 8 и ниже не понимают. Но вы можете использовать jQuery, чтобы он работал везде, или (болезненно) добавить класс в нечетные строки.