需要有关HTML的一些解释，第n个子元素 [英] Need some explanation on HTML, nth-child

问题描述

注意:请参阅下面的内容以了解更清晰的说明

我试图弄清楚为什么会发生这种情况.

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)，然后将1、3、5设置为#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-以.big-chix作为第一个元素的nth-child

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

解决方案

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

否.

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

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

但是请注意，存在 :nth-of-type() 应该执行您想要的操作.

NOTE: SEE BELOW FOR CLEARER EXPLANATION

I'm trying to figure out why this is happening.

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

What I'm trying to achieve here is to put a different background for .big-chix class for nth children 1, 3 , 5... and 2, 4, 6...

But when I put in a paragraph (or anything else like a div, etc for that matter), it becomes like this:

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

The nth-child placement switches places. Why is this so? 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?

---

EDIT: From what I gather, nth-child will not apply to an element child in the element parent in a code like this:

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

BUT, it will work in a parent element that has .big-chix as the first element.

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

解决方案

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?

No.

:nth-child() selects "The nth element in the parent", not "The nth element that also matches the other parts of the selector".

Each selector is applied independently and only elements that match all the components will match the complete selector.

Note, however, that there is :nth-of-type() which should do what you want.

这篇关于需要有关HTML的一些解释，第n个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！