3

我有一个项目列表，我希望按两个一组设置它们的样式，并在组之间交替样式。所以项目 [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 公式？

4

3 回答 3

6

在这里工作 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>
于 2013-05-01T23:35:14.167 回答
5

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

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

http://jsfiddle.net/mckm4/

于 2013-05-01T23:35:43.117 回答
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
}

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

于 2013-05-01T23:34:33.860 回答