Question

我需要一个复杂的n子选择器，并且正在绘制一个空白，如果我列出20个项目以显示我要执行的操作，这可能会有所帮助：

1：背景：＃fdf0e8;

2：背景：＃e7ebf2;

3：背景：＃e7f2f3;

4：背景：＃fdf0e8;

5：背景：＃fdf0e8;

6：背景：＃e7ebf2;

7：背景：＃e7f2f3;

8：背景：＃fdf0e8;

9：背景：＃fdf0e8;

10：背景：＃e7ebf2;

11：背景：＃e7f2f3;

12：背景：＃fdf0e8;

13：背景：＃fdf0e8;

14：背景：＃e7ebf2;

15：背景：＃e7f2f3;

16：背景：＃fdf0e8;

17：背景：＃fdf0e8;

18：背景：＃e7ebf2;

19：背景：＃e7f2f3;

20：背景：＃fdf0e8;

这是否有可能，或者使用PHP循环样式会更好吗？

Answer 1

我认为您想要类似以下所示的内容。我添加了文本颜色只是为了使代码段在运行时更加明显。

.item:nth-child(4n+1), .item:nth-child(4n) {
  background-color: #fdf0e8;
  color: lime;
}
.item:nth-child(4n+2) {
  background-color: #e7ebf2;
  color: red;
}
.item:nth-child(4n+3) {
  background-color: #e7f2f3;
  color: blue;
}

<div>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
</div>

需要复杂的（我认为）第n个子选择器

1 个答案: