Question

我正在尝试按此特定顺序设置列表项的样式：

1：白色 2：白色 3：蓝色
4：蓝色
5：蓝色
6：白色 7：白色 8：蓝色
9：蓝色
10：蓝色
11：白色 12：白色

模式为[1-2] [3-4-5] [6-7] [8-9-10]

我的html结构只是一个简单的列表：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

这种模式是否可以使用css nth-child？如果是这样，我的选择器会是什么样的？

Answer 1

尝试：

ul li:nth-child(5n),
ul li:nth-child(5n-1),
ul li:nth-child(5n-2) {
color:rgb(0,0,255);
}

ul li:nth-child(5n-3),
ul li:nth-child(5n-4) {
color:rgb(255,255,255);
}

Answer 2

相同输出的较短代码为：

li {
  color: white;
}
li:nth-child(5n-3),
li:nth-child(5n-4) {
  color: blue;
}

li {
  color: white;
}
li:nth-child(5n-4),
li:nth-child(5n-3) {
  color: blue;
}
/** FOR THE DEMO **/

body {
  background: grey;
}

<ul>
  <li>1. text</li>
  <li>2. text</li>
  <li>3. text</li>
  <li>4. text</li>
  <li>5. text</li>
  <li>6. text</li>
  <li>7. text</li>
  <li>8. text</li>
  <li>9. text</li>
  <li>10. text</li>
  <li>11. text</li>
  <li>12. text</li>
</ul>

关键是您不需要指定白色应该应用于哪个元素，而只需要指定需要为蓝色的元素，因为它将覆盖“默认”设置的白色。

Answer 3

尝试如下：

li:nth-child(5n - 4),
li:nth-child(5n - 3)  {
    color: white;
}

li:nth-child(5n - 2),
li:nth-child(5n - 1),
li:nth-child(5n)  {
    color: blue;
}

直播示例：http://codepen.io/anon/pen/vENgbx

Answer 4

[大声思考]

从1开始的每5个项目是白色
从2开始的每5个项目是白色
从5开始的每5个项目是蓝色
从5开始的每5个项目是蓝色
从5开始的每5个项目是蓝色

为了将这种重复模式转换为:nth-child(an+b)，我们需要五个选择器：

a将为5
b将是1到5

结果：

li:nth-child(5n+1),
li:nth-child(5n+2) {
  background-color: #FFF;
}
li:nth-child(5n+3),
li:nth-child(5n+4),
li:nth-child(5n+5) {
  background-color: #00F;
}

<ul>
  <li>1: White</li>
  <li>2: White</li>
  <li>3: Blue</li>
  <li>4: Blue</li>
  <li>5: Blue</li>
  <li>6: White</li>
  <li>7: White</li>
  <li>8: Blue</li>
  <li>9: Blue</li>
  <li>10: Blue</li>
  <li>11: White</li>
  <li>12: White</li>
</ul>

使用nth-child选择偶数，然后选择奇数个元素

4 个答案: