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;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以尝试将组大小设置为：nth-child（[size] n + [position]）

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

我更新了你的jsfiddle示例：http://jsfiddle.net/qpDUf/1/

那是你想要的那种吗？

Answer 3

这个选择器最简单：

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

演示：

http://jsfiddle.net/qpDUf/5/

Answer 4

我成功地使用了这个黑客：

首先：为<li>

设置全局颜色

li { background-color: blue; }

其次：选择每个第4个元素并在其后直接应用替代背景<li>元素。这使得成对。 -1从正确的地方开始。

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

享受！

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

4 个答案: