使用 CSS 的斑马条纹 [重复]答案

【问题标题】：Zebra Stripe using CSS [duplicate]使用 CSS 的斑马条纹 [重复]
【发布时间】：2023-04-03 06:24:01
【问题描述】：

我正在尝试实现以下条纹图案，但没有一个 nth-child 组合奏效。实现这一目标的任何建议/解决方案。

【问题讨论】：

你能显示你的html代码吗？
这不是 使用 CSS 替换表格行颜色的副本吗？

【解决方案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 的颜色相同。

【讨论】：

【解决方案2】：

您可以使用nth-of-type 和n 参数（4n+1 和4n+4）来做到这一点

.container div {
    color: #fff;
    float: left;
    width: 50%;
    background-color: blue;
}

.container div:nth-of-type(4n + 1),
.container div:nth-of-type(4n + 4) {
    background-color: green;
}

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

【讨论】：