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*/

答案来自赏怀曼

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

相关问题 热门问题近期问题随机标签

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情