更改所有其他元素的背景颜色答案

【问题标题】：change the background-color of every other element更改所有其他元素的背景颜色
【发布时间】：2017-06-08 19:47:39
【问题描述】：

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

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

所以第一个 [Simple Layout] 将是白色的，第二个 [Few Pictures/Links] 将是黑色的，依此类推。我将其中三个结构嵌套在其他一些 div 元素中。我知道 :even,:odd 方法，但它没有按预期工作。它继续通过每个“dets”类，每次都增加索引。我想要奇数行白色，偶数行黑色。有没有办法为每个“dets”类重新启动自然索引？我不想使用桌子。

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

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

【问题讨论】：

标签： jquery html css css-selectors

【解决方案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;
}

【讨论】：

jQuery 工作正常。没有尝试CSS。你能解释一下为什么我使用的 :even,:odd 没有按预期工作吗？
@QuitoGuillermos 您应该在使用偶数和奇数关键字之前使用nth-child。检查此链接以获取更多信息。 w3schools.com/cssref/sel_nth-child.asp

【解决方案2】：

最好用cssnth-child。

您可以使用 id 代替 class .dets 来减少索引时间，例如 #dets

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

tr:nth-child(2n+1) 表示 HTML 表格的奇数行。
tr:nth-child(奇数) 表示 HTML 表格的奇数行。
tr:nth-child(2n) 表示 HTML 表格的偶数行。
tr:nth-child(偶数) 表示 HTML 表格的偶数行。
span:nth-child(0n+1) 表示作为其父元素的第一个子元素的 span 元素；这与 :first-child 选择器相同。
span:nth-child(1) 相当于上述。
span:nth-child(-n+3) 如果元素是其父元素的前三个子元素之一并且也是一个跨度，则匹配。

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

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

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

【讨论】：

【解决方案3】：

您可以通过使用 css 本身来实现这一点

.dets div:nth-child(奇数){ 背景颜色：白色； } .dets div:nth-child(偶数){ 背景颜色：黑色； }

【讨论】：