html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

使用nth-child选择器循环指定样式_HTML5中文网 - 中国领先的HTML5技术门户

[ ] 已经帮助:人解决问题

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

循环指定样式B2eHTML5中文学习网 - HTML5先行者学习网

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

为一组项目列表指定下面的CSS代码:B2eHTML5中文学习网 - HTML5先行者学习网

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中颜色作为一组循环,最终效果如上图所示。B2eHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助