如何向具有特定类的奇数元素添加背景颜色？

Question

我想向奇数元素添加背景颜色，这些元素在包装器元素中有.row类。但是另一个div出现在每个.row元素之后，所以当我添加nth-child(odd)选择器时，所有.row元素的背景色都会发生变化。我怎样才能添加只使用css？

​

.wrapper {
  border: 1px solid #ccc;
  padding: 20px;
}

.row {
  padding: 10px;
  border-radius: 3px;
}

.description {
  margin-bottom: 20px;
  padding: 10px;
}

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

<div class="wrapper">
  <div class="row">Row-1</div>
  <div class="description">Description-1</div>
  <div class="row">Row-2</div>
  <div class="description">Description-2</div>
  <div class="row">Row-3</div>
  <div class="description">Description-3</div>
  <div class="row">Row-4</div>
  <div class="description">Description-4</div>
  <div class="row">Row-5</div>
  <div class="description">Description-5</div>
</div>

​

JsBin实例

Answer 1

在这种情况下，如果您完全知道将有另一个进来，从偶数元素，您需要找到偶数。您需要以不同的方式使用:nth-child()：

.row:nth-child(4n + 1) {}

这将选择偶数元素的偶数项。

​

.wrapper {
  border: 1px solid #ccc;
  padding: 20px;
}

.row {
  padding: 10px;
  border-radius: 3px;
}

.description {
  margin-bottom: 20px;
  padding: 10px;
}

.row:nth-child(4n + 1) {
  background: red;
}

<div class="wrapper">
  <div class="row">Row-1</div>
  <div class="description">Description-1</div>
  <div class="row">Row-2</div>
  <div class="description">Description-2</div>
  <div class="row">Row-3</div>
  <div class="description">Description-3</div>
  <div class="row">Row-4</div>
  <div class="description">Description-4</div>
  <div class="row">Row-5</div>
  <div class="description">Description-5</div>
</div>

​

预览

​

​

Answer 2

按照标记设置的方式，需要将.wrapper中的每4个div元素作为目标。

.row:nth-child(4n+1) {
  background: red;
}

请记住，这是不灵活的，所以如果您添加div，它将破坏您想要的奇数.row div的效果。