如何选择每两个元素交替？

Question

我想选择每两行并以该模式交替和重复。我怎样才能使用 CSS 做到这一点？

例如....

蓝色行：1、2、5、6、9、10

红行：3,4,7,8

ul{
  list-style-type: none;
  color: white;
}
li:nth-of-type(odd){
  background-color:blue;
}
li:nth-of-type(even){
  background-color:red;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul

编辑：我忘了添加一个关键点，对不起！这种重复将用于未知长度的 ng-repeat，因此它可以永远持续下去。所以我将无法在 css 中每 2 个显式输入。

Answer 1

执行此操作的逻辑规则如下。

• 每四个选择一次，然后选择下一个。把它涂成红色。
• 每四个选择一次，然后向前移动两个，然后再移动一个。把它涂成蓝色。

“移动到下一个”可以通过使用+组合器（下一个兄弟）来完成。

ul{
  list-style-type: none;
  color: white;
}
li:nth-of-type(4n+3), li:nth-of-type(4n+3) + * {
  background-color:blue;
}
li:nth-of-type(4n+1), li:nth-of-type(4n+1) + * {
  background-color:red;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul

或者，正如哈姆斯在下面的评论部分所建议的，您可以使用4n+1和4n+2表示蓝色；和4n+3和4n红色。