循环给HTML元素加指定css

 

需要给小圆圈上色

现在如果我们需要给每个li中的小圆圈，加颜色，一般做法是一个个拿出来在CSS中定义颜色，可是当需要加颜色的li有成百上千个，那工作量简直无法想象，所以在这里分享一个使用css中的子元素选择器给小圆圈加样式的方法：

.toprow:nth-child(5n+1).small-circle{

        background-color:#FFF434

}

 

.toprow:nth-child(5n+2) .small-circle{

      background-color:#FFF456;

}

.toprow:nth-child(5n+3) .small-circle{

      background-color:#A3BAEE;

}

.toprow:nth-child(5n+4) .small-circle{

     background-color:#97D208;

}

.toprow:nth-child(5n+5) .small-circle{

      background-color:#37B6DF;

}

其中 5n+1  意味着隔五取一的给元素添加样式（当然这条算式是可以看情况改变的，比如我想循环十个，这条算式就是10n+1），这样子下来无论有多少个元素，只要使用这个选择器进行样式的定义，便可很方便的解决。