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

概述演示： http://jsfiddle.net/Nwf2A/57/ 使用nth-child伪类显示颜色顺序时遇到问题. 第一组4个div以正确的顺序显示正确的颜色,但我希望第二组和第三组显示相同的颜色顺序. 下面是我的HTML和CSS; HTML： <div> </div><div> </div><div> </div><div> </div><br><div> </div><div> </d 演示： @L_419_0@

使用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;}

解决方法 以下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;}

&LT峰; br>也是一个元素,因此您需要选择每个第5个元素(5n),并为每种颜色(1,2等)添加偏移量.

希望这可以帮助.

总结

以上是内存溢出为你收集整理的html – 在CSS中使用nth-child重复相同的颜色顺序？全部内容，希望文章能够帮你解决html – 在CSS中使用nth-child重复相同的颜色顺序？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。