在CSS3中使用nth-child()选择双打

Question

假设我有一个列表的以下结构:

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

每个<li>都是50%的宽度所以我希望每两个都有这样的背景颜色:

<ul>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
    <li style="background:#CCC;"></li><li style="background:#CCC;"></li>
    <li style="background:#DDD;"></li><li style="background:#DDD;"></li>
</ul>

我可以使用'nth-child()'CSS选择器来做到这一点,以便最小化代码吗？

Answer 1

ul li:nth-child(4n+1),
ul li:nth-child(4n+2) {
  background: #CCC;
}
ul li:nth-child(4n+3),
ul li:nth-child(4n+4) {
  background: #DDD;
}

这将为您提供从第1和第2开始的每个第4个元素作为颜色#CCC和从第3个和第4个开始的每个第4个元素作为#DDD

jsfiddle:http://jsfiddle.net/mU2tn/1/