:nth-child(3n+1)这里的3n+1是啥意思？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了:nth-child(3n+1)这里的3n+1是啥意思？相关的知识，希望对你有一定的参考价值。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
提示：该选择器选取父元素的第 N 个指定类型的子元素。
n的取值为0,1,2,3,4,5.....的自然数。
所以3n+1 就是第 1,4,7,10,....这样的元素的下标。
元素的下标是从0开始。
下面是简单的代码，仅供参考：
<style>ul overflow:hidden;
li width:20px; height:20px; border:1px solid #ccc; float:left;
ul li:nth-child(3n+1) background:red;
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body> 参考技术A
看看这个你就明白了：
序号写法：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*/本回答被提问者采纳
以上是关于:nth-child(3n+1)这里的3n+1是啥意思？的主要内容，如果未能解决你的问题，请参考以下文章