需要有关HTML的一些解释，第n个子元素

Question

注意：请参阅以下内容以获取更清晰的说明

我试图弄清楚为什么会这样。

jsFiddle 1-之前

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

我要在这里实现的目的是为第n个孩子1、3、5 ...和2、4、6 ...的.big-chix类设置不同的背景。

但是，当我输入一个段落（或其他类似div的东西）时，它变成这样：

jsFiddle 2-之后

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

第n个子元素放置位置切换。 为什么会这样呢？ 不是.big-chix:nth-child()仅假定选择所有.big-chix类（即6 .big-chix ），然后将.big-chix设置为#eee的background-color ，和2，4，6到#aaa ？

---

编辑：从我收集的数据来看， nth-child元素不适用于像这样的代码中元素父元素中的元素子元素：

jsFiddle-当<p>段落是第一个元素时的nth-child（1）

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

但是 ，它将在以.big-chix作为第一个元素的父元素中工作。

jsFiddle-nth-child以.big-chix作为第一个元素

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

Answer 1

不是.big-chix：nth-​​child（）仅假定选择所有.big-chix类（即6 .big-chix），然后将1、3、5设置为#eee的背景色，和2、4、6到#aaa？

没有。

:nth-child()选择“父元素中的第n个元素”，而不是“也与选择器其他部分匹配的第n个元素”。

每个选择器都是独立应用的，只有匹配所有组件的元素才会匹配完整的选择器。

但是请注意，有:nth-of-type()应该可以执行您想要的操作。

Answer 2

用这些

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

在http://jsfiddle.net/TeqUF/2/中工作