html - CSS 每隔一个 LI 元素，但两个成对

Question

我有一个 CSS 问题，我需要选择每隔一对元素并相应地更改背景颜色。 我不能向这些对添加额外的类，我一直在尝试使用 :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>