更改每个其他元素的背景颜色

Question

我想更改以下所有其他元素的背景颜色：

<div class="dets">
 <div>Simple Layout</div>
 <div>Few Pictures/Links</div>
 <div>Element Uniformity</div>
</div>

因此第一个[简单布局]将为白色，第二个[少量图片/链接]将为黑色，依此类推。我有三个嵌套在其他div元素中的结构。我知道：偶数，奇怪的方法，但它并没有像预期的那样做。它继续通过每个＆＃34; dets＆＃34;类，每次都增加索引。我希望奇数行是白色的，甚至是行黑色。有没有办法重新启动每个＆＃34; dets＆＃34;的自然索引？类？我不想用桌子。

我目前正在使用以下jQuery来设置背景颜色：

$(".dets div:odd").css('background-color', 'white');
$(".dets div:even").css('background-color', 'black');

Answer 1

尝试：

$(".dets>div:nth-child(odd)").css('background-color', 'white');
$(".dets>div:nth-child(even)").css('background-color', 'black');

你也可以只用css：

来做

.dets>div:nth-child(odd){
 background-color:white;
}
.dets>div:nth-child(even){
 background-color:black;
}

Answer 2

最好使用css nth-child。

您可以使用ID而不是类/usr/share/tomcat/bin/tomcat-juli.jar来缩短索引时间，例如.dets

您可以使用其他选择器，也可以根据您的要求使用它：例如：

• 的 TR：第n个孩子（2N + 1） 表示HTML表的奇数行。
• 的 TR：第n个孩子（奇数） 表示HTML表的奇数行。
• 的 TR：第n个孩子（2N） 表示HTML表的偶数行。
• 的 TR：第n个孩子（偶数） 表示HTML表的偶数行。
• 的跨度：第n个孩子（0N + 1） 表示span元素，它是其父元素的第一个子元素;这与：first-child选择器相同。
• 的跨度：第n个孩子（1） 相当于上述。
• 的跨度：第n个孩子（-n + 3） 如果元素是其父元素的前三个子元素之一以及跨度，则匹配。

#dets

.dets>div:nth-child(even){
background:#000;
color:#fff;
}

.dets>div:nth-child(odd){
background:#fff;
}

Answer 3

您可以使用

在css中实现此目的

  

.dets div：nth-​​child（odd）{   背景颜色：白色;   }   .dets div：nth-​​child（even）{   背景色：黑色;   }