所以,这是一个非常基本的问题,但是我根本无法解决为什么它无法按预期工作的问题。
情况:
我有几个div,类别为row
。我希望每个奇数row
都具有红色背景,所以我使用.row:nth-child(odd)
来选择那些背景。它有效,所以我继续工作。
有一次,我在HTML中添加了一个类为notrow
的div,希望它仍然为每个奇数row
添加一个读取背景。
结果:
类别为notrow
的新div计入nth-child(odd)
选择器中,即使它没有row
作为类别,导致第二个{{ 1}}相遇(即使它是偶数row
)。
代码段
row
.row:nth-child(odd) {
background: red;
}
预期结果
我希望<div class="wrapper">
<div class="row">
line 1 (should be red)
</div>
<div class="notrow">
line 1.5 not row
</div>
<div class="row">
line 2
</div>
<div class="row">
line 3 (should be red)
</div>
<div class="row">
line 4
</div>
</div>
选择器将以奇数行为目标,但是它也将.row:nth-child(odd)
计为一行,从而破坏了我的notrow
选择器。