关于css的nth-child,怎么循环12345之类的

秋刀鱼Bin
  • 635

问个问题,这个能用css实现么。
nth-child(1),nth-child(2),nth-child(3)……
我想做成6个不同颜色一直循环来着,也就是第七个开始也是蓝开始。

图片描述

图片描述

回复
阅读 3.4k
3 个回答

如果是这样的话,就没有必要使用nth-child了,直接写6个class

jeterlin
  • 2
新手上路,请多包涵

这种应该写6个class然后用js把这些class插入循环的html tag里比较方便吧

li:nth-child(6n+1){
            color: #f00;
        }
        li:nth-child(6n+2){
            color: #f90;
        }
        li:nth-child(6n+3){
            color: #ccc;
        }
        li:nth-child(6n+4){
            color: royalblue;
        }
        li:nth-child(6n+5){
            color: #ccc;
        }
        li:nth-child(6n+6){
            color: aqua;
        }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏