背景颜色不同偶数行答案

【问题标题】：Background color different even row背景颜色不同偶数行
【发布时间】：2021-08-26 10:53:36
【问题描述】：

我有这个：

<div class="row">
    <div>something</div>
    <div>something</div>
</div>
<div class="row">
    <div>something</div>
    <div>something</div>
 </div>

我希望偶数 class="row" 所有子 div 都有背景（例如蓝色），奇数 class="row" 所有子 div 都有背景（例如红色）

所以结果是：

<div class="row">
    <div style="background:blue">something</div>
    <div style="background:blue">something</div>
 </div>
 <div class="row">
    <div style="background:red">something</div>
    <div style="background:red">something</div>
  </div>

【问题讨论】：

标签： css background-color

【解决方案1】：

你可以用 CSS 做到这一点

.container > .row:nth-child(even) > div{
  background: red;
}

.container > .row:nth-child(odd) > div{
  background: blue;
}

<div class="container">
<div class="row">
    <div>something</div>
    <div>something</div>
</div>
<div class="row">
    <div>something</div>
    <div>something</div>
 </div>
 <div class="row">
    <div>something</div>
    <div>something</div>
</div>
<div class="row">
    <div>something</div>
    <div>something</div>
 </div>
</div>

【讨论】：

【解决方案2】：

像这样将它们放入容器中：

<div class="container">
<div class="row">
    <div>something</div>
    <div>something</div>
 </div>
 <div class="row">
    <div>something</div>
    <div>something</div>
  </div>
</div>

.container row:nth-child(even) div
{
background: blue
}

.container row:nth-child(odd) div
{
background: red
}

【讨论】：

这是行不通的，如果你从 div 中删除了style="background:blue"，所有的 div 都将具有相同的背景，在你的情况下为红色。