重复一个CSS对象

Question

我想用纯CSS制作类似斑马纹的图案。工作的一个具有跨度的多个实例以生成重复。 Here is the code

<div id="wrap">    
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
 <span class="five"></span>
</div>

我知道使用x重复条纹会更容易，但我想知道是否可以使用纯CSS 而不使用<span>或{{1}的多个实例喜欢：

<div>

Answer 1

如果您不介意放弃对旧浏览器的支持，可以使用:nth-child()：

#wrap span:nth-child(odd) {background-color:#000}

MDN Document

Answer 2

我认为thread正是您所寻找的，尤其是this。它是用于制作图案的css3渐变。基本上，您为背景创建一个模式，然后重复该模式。但是，较旧的浏览器不起作用，但我不知道这是否是一个问题。

Answer 3

尝试this：

span:nth-child(2n+1) /* represents every odd-numbered child of its parent */
span:nth-child(odd)  /* same */