CSS3 nth-child не работает Chrome 9

Question

Привет всем, у меня есть этот код:

    <div class="sidebox">

            <h3>Course Summary</h3>

            <div class="block">

                <h4>Course ID</h4> 
                <p>MS00000001</p>
                <h4>Start Date</h4> 
                <p>14<sup>th</sup> September 2011</p>
                <h4>End Date</h4> 
                <p>12<sup>th</sup> June 2012</p>
                <h4>Cost</h4> 
                <p>£1500.95</p>     

            </div>

        </div>

теперь я пытаюсь изменить цвет каждого второго тега P

.sidebox .block p:nth-child(odd) {
    color: red !important;
}

Я пытался использовать это, но это не сработало: / ничего не меняет цвет, я здесь что-то не так делаю?

Answer 1

Как говорит Мэтт Болл, элементы индексируются 1 вместо 0.Поэтому ваши p элементы являются четными, а не нечетными, поэтому они не будут совпадать вообще.Другая уловка в том, что :nth-child() учитывает каждого родного брата под этим родителем, независимо от типа, поэтому, если вы используете p:nth-child(even), * * выбирается каждый p.

Use p:nth-of-type(even) вместо этого, поэтому не-1012 * братья и сестры (в данном случае h4 элементы) исключаются из выбора:

.sidebox .block p:nth-of-type(even) {
    color: red !important;
}

Образец на jsFiddle

Answer 2

В вашей разметке нет элемента p, который является нечетным дочерним элементом.CSS nth-child индексируется 1.

Индекс первого дочернего элемента равен 1.

Источник