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

Posted 2023-03-05

【中文标题】使用 CSS 的斑马条纹 [重复]

【英文标题】：Zebra Stripe using CSS [duplicate]

【发布时间】：2018-05-20 08:48:58

【问题描述】：

我正在尝试实现以下条纹图案，但没有一个 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>