CSS选择器：如何对项目[1-2] [5-6] [9-10]等进行样式设置

Question

我有一个项目列表，我希望按两个一组的方式设置它们，并在组之间交替使用样式。所以[1-2] [5-6] [9-10]项可以是{ background-color: #C0C0C0 ;}，而[3-4] [7-8] [11-12] ......可以是{ background-color: #FFF ;}

对于这样的结果：

1. 灰色
2. 灰色
3. 的黑
4. 的黑
5. 灰色
6. 灰色
7. 的黑
8. 的黑
9. 灰色
10. 灰色
11. 的黑
12. 的黑
13. ...

我应该使用哪种CSS nth-child公式？

Answer 1

Working jsFiddle here.

---

使用:nth-child(4n+3), :nth-child(4n+4)

<强> CSS：

li:nth-child(4n+4), li:nth-child(4n+3) {
  color:red;
}

<强> HTML：

<ul>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
    <li>No</li>
    <li>No</li>
    <li>YES</li>
    <li>YES</li>
</ul>

Answer 2

您可以使用2个选择器完成此操作

:nth-child(4n),:nth-child(4n-1){font-weight:bold}

http://jsfiddle.net/mckm4/

Answer 3

li:nth-child(4n+1), li:nth-child(4n+2) {
    background-color: #C0C0C0
}

li:nth-child(4n+3), li:nth-child(4n) {
    background-color: #FFF
}

这不是特别优雅，但它应该服务。