CSS循环的nth子模式
CSS循环的nth子模式
提问于 2019-12-12 11:04:05
有点有趣的CSS问题，我试图找出与模式有关的问题。
我希望发生以下情况：
- LI 1-3 =背景绿色
- Li4-6=背景红
- LI 7-9 =背景蓝
然后重复一遍，所以：
- LI 10-12 =背景绿色
- LI 13-15 =背景红
- LI 16-18 =背景蓝
这应该在相同的9块模式中重复无限次。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-12-12 11:09:47
您可以使用nth-child的CSS选择器来获得这个结果。
由于周期占据9个空格(1-3、4-6、7-9)，这是9n，然后在列表中添加项的偏移量。例如：
ul > li:nth-child(9n + 1),
ul > li:nth-child(9n + 2),
ul > li:nth-child(9n + 3) {
background-color: green;
}下面是一个工作片段，展示它：
ul > li:nth-child(9n + 1),
ul > li:nth-child(9n + 2),
ul > li:nth-child(9n + 3) {
background-color: green;
}
ul > li:nth-child(9n + 4),
ul > li:nth-child(9n + 5),
ul > li:nth-child(9n + 6) {
background-color: red;
}
ul > li:nth-child(9n + 7),
ul > li:nth-child(9n + 8),
ul > li:nth-child(9n + 9) {
background-color: blue;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty</li>
</ul>
Stack Overflow用户
发布于 2019-12-12 11:07:36
因此，您可能已经尝试过:nth-child(3n)，但发现它并不是您想要的。
你想要的是：
li{
height: 30px;
border: 2px solid #000;
&:nth-child(9n + 1),
&:nth-child(9n + 2),
&:nth-child(9n + 3){
background: green;
}
&:nth-child(9n + 4),
&:nth-child(9n + 5),
&:nth-child(9n + 6){
background: red;
}
&:nth-child(9n + 7),
&:nth-child(9n + 8),
&:nth-child(9n + 9){
background: blue;
}
}看起来你在3组中重复，但实际上你在9组中重复，这是因为你有3组，即3x3=9
nth:child(9n)每九个元素就会有一个目标。现在这只是一个增量，以处理前3，第2 3和第3 3。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59303149
复制相关文章
相似问题
腾讯云开发者
