为什么:nth-​​child(odd)不在类中选择每个奇数div,而是基本上在每个奇数元素中选择

时间:2019-02-11 10:23:36

标签: html css css-selectors

所以,这是一个非常基本的问题,但是我根本无法解决为什么它无法按预期工作的问题。

情况:

我有几个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选择器。

0 个答案:

没有答案