css - CSS Recurring nth-child Pattern

Question

我试图弄清楚与模式有关的一个有趣的 CSS 问题。

我希望发生以下情况：

• LI 1-3 = 背景绿色
• LI 4-6 = 背景红色
• LI 7-9 = 背景蓝色

然后重复，所以：

• LI 10-12 = 背景绿色
• LI 13-15 = 背景红色
• LI 16-18 = 背景蓝色

这应该以相同的 9 块模式重复无限次。

标签： css

Answer 1

因此，您可能已经尝试过: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 个 3 组，即 3x3=9

nth:child(9n)

将针对每 9 个元素。现在它只是增加 this 以处理第一个 3、第二个 3 和第三个 3 的情况。