html - 需要一些关于 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; }

我在这里想要实现的是为 .big-chix 设置不同的背景第 n 个 child 的类(class) 1, 3 , 5... 和 2, 4, 6...

但是当我放入一个段落(或其他类似 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 设置为 background-color的 #eee , 和 2, 4, 6 到 #aaa ？

---

编辑:据我所知，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

Isn't .big-chix:nth-child() only suppose to select all the .big-chix classes (which is 6 .big-chix), then set 1, 3, 5 to a background-color of #eee, and 2, 4, 6 to #aaa?

没有。

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

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

但是请注意，这里有 :nth-of-type()哪个应该做你想做的。