nth-child()选择器怎么用?:nth-child(3n+1)是什么意思?

 2017-09-15 10:05:18  46 人阅读  0 条评论

您若有更好的答案请留言告知,一旦确认为最佳答案,将会替换本文的最佳答案,谢谢支持!

 最佳答案:

nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。

看看这个你就明白了:

序号写法:

li:nth-child(3){background:orange;}/*把第 3 个 LI 的背景设为橙色*/

倍数写法:

li:nth-child(3n){background:orange;}/*把第 3、第 6、第 9、…、所有 3 的倍数的 LI 的背景设为橙色*/

倍数分组匹配:

li:nth-child(3n+1){background:orange;}/*匹配第 1、第 4、第 7、…、每 3 个为一组的第 1 个 LI*/

li:nth-child(3n+5){background:orange;}/*匹配第 5、第 8、第 11、…、从第 5 个开始每 3 个为一组的第 1 个 LI*/

li:nth-child(5n-1){background:orange;}/*匹配第 5-1=4、第 10-1=9、…、第 5 的倍数减 1 个 LI*/

答案来自赏怀曼

如果文章对你有帮助,请赞赏支持boke112导航发展!

问题标签: ,  
编辑作者:懿古今(QQ号:2226524923,QQ群:415623933
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!
问题分类:WordPress问题 ,  ZBlog程序问题 ,  建站技术问题 ,  操作系统问题 ,  办公软件问题 ,  综合其他问题

 发表评论