CSS每隔一个LI元素,但是成对的两个

Question

我有一个CSS问题,我需要选择每个其他PAIR元素并相应地更改背景颜色.我不能在对中添加额外的类,我一直在尝试使用组合:nth-child来找到解决方案.想知道是否有人之前做过这件事,并且可以指出我正确的方向

ul li:nth-child(2n + 1) { background-color: blue; }
ul li:nth-child(2n + 0) { background-color: blue; }
ul li:nth-child(3n + 0) { background-color: green; }
ul li:nth-child(4n + 0) { background-color: green; }

  <ul>
    <li>Item 1 Group 1</li>
    <li>Item 2 Group 1</li>

    <li>Item 1 Group 2</li><!-- Make BG Blue -->
    <li>Item 2 Group 2</li><!-- Make BG Blue -->

    <li>Item 1 Group 3</li>
    <li>Item 2 Group 3</li>

    <li>Item 1 Group 4</li><!-- Make BG Blue -->
    <li>Item 2 Group 4</li><!-- Make BG Blue -->

    <li>Item 1 Group 5</li>
    <li>Item 2 Group 5</li>
  </ul>

http://jsfiddle.net/qpDUf/

Answer 1

尝试:

li:nth-child(4n + 1), li:nth-child(4n + 2) {
    background-color: green;
}
li:nth-child(4n + 3), li:nth-child(4n + 4) {
    background-color: blue;
}

li:nth-child(4n + 1), li:nth-child(4n + 2) {
    background-color: green;
}
li:nth-child(4n + 3), li:nth-child(4n + 4) {
    background-color: blue;
}

<ul>
    <li>Item 1 Group 1</li>
    <li>Item 2 Group 1</li>

    <li>Item 1 Group 2</li><!-- Make BG Blue -->
    <li>Item 2 Group 2</li><!-- Make BG Blue -->

    <li>Item 1 Group 3</li>
    <li>Item 2 Group 3</li>

    <li>Item 1 Group 4</li><!-- Make BG Blue -->
    <li>Item 2 Group 4</li><!-- Make BG Blue -->

    <li>Item 1 Group 5</li>
    <li>Item 2 Group 5</li>
  </ul>