使用nth-子选择偶数，然后选择奇数的元素。

Question

我试图按照特定的顺序列出项目：

1:白色

2:白色

3:蓝色

4:蓝色

5:蓝色

6:白色

7:白色

8:蓝色

9:蓝色

10:蓝色

11:白色

12:白色

图案为1-2 6-7。

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

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

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

Answer 1

同一输出的较短代码如下：

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 2

尝试：

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 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