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公式？

- Hugolpz

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>

- dsgriffin

---

我建议切换到:nth-child(4n+3), :nth-child(4n+4)，这个顺序更有意义，不是吗？无论如何，只要SO允许我这样做，我都会接受你的答案。 - Hugolpz

+1！4n+3；4n+4的答案更长，但更直观，非常适合初学者！ - Hugolpz

@Zenith，我一开始踩了你的回答，因为它是错误的，但是当你更正了回答后，我撤回了我的踩。这不是关于仇恨，而是关于提供准确的信息。 ;) - Derek Henderson

你的选择器是错误的，但当你编辑了你的答案后，我撤回了我的踩并给了你一个赞。我不认为有什么问题。你没有因为我的踩而失去任何声望分数，而从我的赞中获得了10分。我确实编辑了另一个答案来修复选择器，但你已经修复了你的选择器。老实说，我完全看不出任何虚伪之处。如果你收到了另一个踩，那不是来自我。 - Derek Henderson

谢谢你也帮我修复了。不幸的是，我的客户拒绝使用现代浏览器，所以我缺乏与它们的经验。 - Eric Jablow

Answer 2

您可以使用两个选择器来完成此操作。

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

http://jsfiddle.net/mckm4/

- Musa

---

+1！这个4n; 4n-1的答案非常适合那些希望保持2个字符的纯粹主义者。另一方面，4n+3; 4n+4的答案更适合初学者（直观易懂）。 - Hugolpz

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
}

这并不是特别优雅，但它应该可以胜任。

- Eric Jablow