需要一些关于 HTML，nth-child 的解释

Question

注意：请参阅下文以获得更清晰的说明

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

jsFiddle 1 - Before

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 - After

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），然后将1、3、5设置为#eee的background-color，将2、4、6设置为@ 987654335@?

---

编辑：据我所知，nth-child 不会在这样的代码中应用于元素父元素中的元素子元素：

jsFiddle - nth-child(1) when <p> paragraph is the first element

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 with .big-chix as the first element

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/工作