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

 2017-09-15 10:05:18  35 人阅读  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
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!

 发表评论