html - 在 CSS 中使用第 nth-child 重复相同的颜色顺序？

Question

演示: http://jsfiddle.net/Nwf2A/57/

我在使用 nth-child 伪类显示颜色顺序时遇到问题。

第一组 4 个 div 以正确的顺序显示正确的颜色，但我希望第二组和第三组以相同的颜色顺序显示。

下面是我的 HTML 和 CSS；

HTML:

<div> </div><div> </div><div> </div><div> </div>
<br>
<div> </div><div> </div><div> </div><div> </div>
<br>
<div> </div><div> </div><div> </div><div> </div>

CSS:

div {height: 20px;margin: 5px;}
div:nth-child(1n) {background: blue;}
div:nth-child(2n) {background: red;}
div:nth-child(3n) {background: green;}
div:nth-child(4n) {background: black;}

Answer 1

以下 CSS 将为您提供所需的解决方案。

div {height: 20px;margin: 5px;}
div:nth-child(5n+1) {background: blue;}
div:nth-child(5n+2) {background: red;}
div:nth-child(5n+3) {background: green;}
div:nth-child(5n+4) {background: black;}

<br>也是一个元素，因此您需要选择每第 5 个元素 ( 5n )，并为每种颜色( +1 、 +2 等)选择一个偏移量。

希望这对您有所帮助。