css3入门

使用nth-child选择器循环指定样式

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

如果开发者相对所有的列表项目都使用样式,采用一个个列表项目分别指定的方式,让剩下的列表项目循环采用一开始已经指定好的样式该如何实现那?

循环指定样式

这是仍然可以使用用nth-child选择器,只要在“nth-child(n)”语句处,把参数n改成可循环的αn+β的形式就可以。α表示每次循环中共包括几种样式,β表示指定样式在循环中所处的位置。

为一组项目列表指定下面的CSS代码:

li:nth-child(4n+1) { background:#C00;}
li:nth-child(4n+2) { background:#F30;}
li:nth-child(4n+3) { background:#FF0;}
li:nth-child(4n+4) { background:#6CF;}

此处是4中颜色作为一组循环,最终效果如上图所示。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    2015-09-30 11:41

  • divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    2015-09-30 11:38

网友点评
>