交替的HTML内容应该是,html – 着色某些类的交替div

即使只是使用(默认情况下)

.row {}

然后用以下方法覆盖奇数：

.row:nth-child(4n+1) {}

.row {

background: #fff;

}

.row:nth-child(4n+1) {

background: #eee;

}

有关nth-child如何工作的更多信息,请点击此处：

你不能简单地在这个实例中使用偶数/奇数,因为它与所有子元素有关,而不仅仅是具有类行的元素.

在选择器中包含.row纯粹是一个额外的标准,对nth-child选择器没有影响.

同样我可以说：

.row:nth-child(1):hover {}

这会将选择限制为具有行类的元素,该行是第二个子节点,当前处于悬停状态.

如果这是所有悬停元素中的第二个元素是没有意义的,因为你一次只能悬停在一个元素上.

我希望这是有道理的！

值得注意的是,您的选择器现在依赖于现有的非行,或者行元素之间存在的至少某种元素.

如果要改变那么你的选择器也必须改变.

或者,您可以将非行元素的元素类型更改为其他元素,以便您可以使用nth-of-type选择器：

row 0

row 1

row 2

row 3

.row {

background: #fff;

}

.row:nth-of-type(odd) {

background: #eee;

}