分享一个循环给HTML元素加样式的方法(css)

分享一个循环给HTML元素加样式的方法(css)_第1张图片
需要给小圆圈上色

现在如果我们需要给每个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),这样子下来无论有多少个元素,只要使用这个选择器进行样式的定义,便可很方便的解决。

你可能感兴趣的:(分享一个循环给HTML元素加样式的方法(css))