Zebra Stripe使用CSS

Question

我试图实现以下条纹模式,但没有一个n-child组合正在解决.任何建议/解决方案来实现这一目标.

Answer 1

你可以这样做:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex-basis: 50%;
  height: 25px;
  background: #7F7F7F;
}

.child:nth-child(4n+1),
.child:nth-child(4n+4) {
  background: #FF0080;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

点是经过多少看到div 元素(.child图形)重复,这是第一个数字或4n,然后只设置在第一和第四是相同的颜色与所述的+1和+4.