ПРИМЕЧАНИЕ: ПОСМОТРЕТЬ НИЖЕ ДЛЯ ПОЯСНИТЕЛЬНОГО ОБЪЯСНЕНИЯ

Я пытаюсь понять, почему это происходит.

jsFiddle 1 - До

HTML

    Contento
    Contento
    Contento
    Contento
    Contento
    Contento

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }

Что я'Я пытаюсь достичь здесь, чтобы поставить другой фон для.big-chix класс для n-х детей 1, 3, 5 ... и 2, 4, 6 ...

Но когда я вставляю абзац (или что-то еще, например, div и т. Д. В этом отношении), это становится так:

jsFiddle 2 - после

HTML

    <p>paragraphy</p>
    Contento
    Contento
    Contento
    Contento
    Contento
    Contento

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(2n+1) { background-color:#eee; }
.big-chix:nth-child(2n+2) { background-color:#aaa; }

Размещение nth ребенка меняет местами. Почему это так? не.big-chix:nth-child() только предположим, чтобы выбрать все.big-chix классы (что 6.big-chix), затем установите 1, 3, 5 вbackground-color из#eeeи 2, 4, 6 до?#aaa

РЕДАКТИРОВАТЬ: Из того, что я собираю,nth-child не будет применяться к дочернему элементу в родительском элементе в коде, подобном следующему:

jsFiddle - nth-child (1), когда

 абзац является первым элементом

HTML

    <p>paragraphy</p> [this is nth-child(1)]
    Contento [this is nth-child(2)]
    Contento [this is nth-child(3)]
    Contento [this is nth-child(4)]
    Contento [this is nth-child(5)]
    Contento [this is nth-child(6)]
    Contento [this is nth-child(7)]

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(1) { background-color:#eee; }

НО, он будет работать в родительском элементе, который имеет.big-chix как первый элемент.

jsFiddle - n-й ребенок с.big-chix как первый элемент

HTML

    Contento [this is nth-child(1)]
    <p>paragraphy</p> [this is nth-child(2)]
    Contento [this is nth-child(3)]
    Contento [this is nth-child(4)]
    Contento [this is nth-child(5)]
    Contento [this is nth-child(6)]
    Contento [this is nth-child(7)]

CSS

.chicken { width:100%; background:#999; float:left; }

.big-chix { width:48%; margin:0.5%; padding:0.5%; background:#666; float:left; }

.big-chix:nth-child(1) { background-color:#eee; }