html – 着色某些类的交替div

概述我的代码如下： HTML <div class="divs"> <div class="row">row 0</div> <div class="not-row"></div> <div class="row">row 1</div> <div class="not-row"></div> <div class="row">row 2</div> <div class="n 我的代码如下：

HTML

<div >  <div >row 0</div>  <div ></div>  <div >row 1</div>  <div ></div>  <div >row 2</div>  <div ></div>  <div >row 3</div>   <div ></div></div>

CSS

.row:nth-child(even) {  background: #fff;}.row:nth-child(odd) {  background: #eee;}

这应该绘制两行灰色和两行白色的背景.不幸的是,它将所有背景描绘成灰色.我究竟做错了什么？

我尝试使用nth-of-type而不是nth-child,但这并没有改变任何东西.

jsFiddle example

解决方法 即使只是使用(默认情况下)

.row {}

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

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

.row {    background: #fff;}.row:nth-child(4n+1) {   background: #eee;}

http://jsfiddle.net/b8ma1hon/3/

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

https://css-tricks.com/how-nth-child-works/

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

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

同样我可以说：

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

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

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

我希望这是有道理的！

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

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

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

<div >    <div >row 0</div>    <span ></span>    <div >row 1</div>    <span ></span>    <div >row 2</div>    <span ></span>    <div >row 3</div>     <span ></span></div>.row {    background: #fff;}.row:nth-of-type(odd) {   background: #eee;}

http://jsfiddle.net/b8ma1hon/5/

总结

以上是内存溢出为你收集整理的html – 着色某些类的交替div全部内容，希望文章能够帮你解决html – 着色某些类的交替div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。