html nthchild作用,需要对HTML，nth-child进行一些解释

注意：请参阅以下内容以获取更明确的解释

我想弄清楚为什么会这样。

HTML

Contento

Contento

Contento

Contento

Contento

Contento

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 ...... {/ 1}}提供不同的背景...

但是当我输入一个段落(或其他类似div等等)时，就会变成这样：

HTML

.big-chix

CSS

paragraphy

Contento

Contento

Contento

Contento

Contento

Contento

第n个孩子的位置切换位置。为什么会这样？ .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:nth-child()类(6 .big-chix)，然后将1,3,5设置为.big-chix background-color }，以及2,4,6到#eee？

编辑：从我收集的内容来看，#aaa将不会应用于代码中元素父元素中的元素子元素：

HTML

nth-child

CSS

paragraphy

[this is nth-child(1)]

Contento

[this is nth-child(2)]

Contento

[this is nth-child(3)]

Contento

[this is nth-child(4)]

Contento

[this is nth-child(5)]

Contento

[this is nth-child(6)]

Contento

[this is nth-child(7)]

但是，它将在以.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; }作为第一个元素的父元素中工作。

HTML

.big-chix

CSS

Contento

[this is nth-child(1)]

paragraphy

[this is nth-child(2)]

Contento

[this is nth-child(3)]

Contento

[this is nth-child(4)]

Contento

[this is nth-child(5)]

Contento

[this is nth-child(6)]

Contento

[this is nth-child(7)]