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

在这里工作jsFiddle.

使用 :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/