NOTA: VEA A CONTINUACIÓN PARA UNA EXPLICACIÓN MÁS CLARA

Estoy tratando de averiguar por qué está sucediendo esto.

jsFiddle 1 - Antes

HTML

<div class="chicken">
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
</div>

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; }

Lo que estoy tratando de lograr aquí es poner un fondo diferente para.big-chix clase para nth niños 1, 3, 5 ... y 2, 4, 6 ...

Pero cuando pongo un párrafo (o cualquier otra cosa como un div, etc.), se vuelve así:

jsFiddle 2 - despues

HTML

<div class="chicken">
    <p>paragraphy</p>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
    <div class="big-chix">Contento</div>
</div>

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; }

La colocación nth-child cambia de lugar. ¿Por qué esto es tan? No es.big-chix:nth-child() Supongamos que solo se seleccionan todos.big-chix clases (que es 6.big-chix), luego ajuste 1, 3, 5 a unabackground-color de#eeey 2, 4, 6 a#aaa?

EDIT: De lo que yo recojo,nth-child no se aplicará a un elemento secundario en el elemento primario en un código como este:

jsFiddle - nth-child (1) cuando<p> el párrafo es el primer elemento

HTML

<div class="chicken">
    <p>paragraphy</p> [this is nth-child(1)]
    <div class="big-chix">Contento</div> [this is nth-child(2)]
    <div class="big-chix">Contento</div> [this is nth-child(3)]
    <div class="big-chix">Contento</div> [this is nth-child(4)]
    <div class="big-chix">Contento</div> [this is nth-child(5)]
    <div class="big-chix">Contento</div> [this is nth-child(6)]
    <div class="big-chix">Contento</div> [this is nth-child(7)]
</div>

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; }

PERO, funcionará en un elemento padre que tiene.big-chix como el primer elemento.

jsFiddle - nth-child con.big-chix como el primer elemento

HTML

<div class="chicken">
    <div class="big-chix">Contento</div> [this is nth-child(1)]
    <p>paragraphy</p> [this is nth-child(2)]
    <div class="big-chix">Contento</div> [this is nth-child(3)]
    <div class="big-chix">Contento</div> [this is nth-child(4)]
    <div class="big-chix">Contento</div> [this is nth-child(5)]
    <div class="big-chix">Contento</div> [this is nth-child(6)]
    <div class="big-chix">Contento</div> [this is nth-child(7)]
</div>

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; }