如何将交替背景色应用于非同级的div

Question

我希望aaaa和bbbb有红色背景。我该怎么做，通常的答案似乎不起作用，因为目标div不是兄弟

这是我的CSS/HTML:

div.rules-container>div.ng-star-inserted>div.rules-form:nth-of-type(odd) {
background: red;
}

<div class="rules-container">
<div class="ng-star-inserted">
<div class="rules-form">
aaaaaaaaaaaa
</div>
</div>
<div class="ng-star-inserted">
<div class="rules-form">
bbbbbbbbbb
</div>
</div>
<div class="ng-star-inserted">
<div class="rules-form">
ccccccccccccc
</div>
</div>
</div>

Answer 1

使用:nth-child(odd)。

答案1:

如果你想要所有的奇数，那么这样做：

.rules-container .ng-star-inserted:nth-child(odd) {
background-color: red;
}

<div class="rules-container">
<div class="ng-star-inserted">
<div class="rules-form">
aaaaaaaaaaaa
</div>
</div>
<div class="ng-star-inserted">
<div class="rules-form">
bbbbbbbbbb
</div>
</div>
<div class="ng-star-inserted">
<div class="rules-form">
ccccccccccccc
</div>
</div>
</div>

<div class="ng-star-inserted">
<div class="rules-form">
dddddddddddddd
</div>
</div>


<div class="ng-star-inserted">
<div class="rules-form">
eeeeeeeeeeeeee
</div>
</div>

答案2:

如果你只想要1&3，而不是5，然后将css更改为：

.rules-container .ng-star-inserted:nth-child(1), .rules-container .ng-star-inserted:nth-child(3) {
background-color: red;
}

<div class="rules-container">
<div class="ng-star-inserted">
<div class="rules-form">
aaaaaaaaaaaa
</div>
</div>
<div class="ng-star-inserted">
<div class="rules-form">
bbbbbbbbbb
</div>
</div>
<div class="ng-star-inserted">
<div class="rules-form">
ccccccccccccc
</div>
</div>
</div>

<div class="ng-star-inserted">
<div class="rules-form">
dddddddddddddd
</div>
</div>


<div class="ng-star-inserted">
<div class="rules-form">
eeeeeeeeeeeeee
</div>
</div>