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

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 个项目都是白色的
• 从 3 开始的每 5 个项目是蓝色的
• 从 4 开始的每 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>