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

问题描述

我想每隔两行选择一次，并以该模式交替并重复.如何使用CSS做到这一点?

I would like to select every two rows and alternate and repeat in that pattern. How can I do this using CSS?

例如....

蓝排:1,2,5,6,9,10

Blue Rows:1,2,5,6,9,10

红色行:3,4,7,8

Red Rows: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显式键入一次.

I forgot to add a key point, sorry! This repetition will be used in an ng-repeat of unknown length so it could go on forever. So i won't be able to explicity type by every 2 in the css.

推荐答案

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

The logical rules for doing this are the following.

• 每四分之一选择一个，然后选择下一个.将其涂成红色.
• 每四分之一选择一个，然后向前移动两个，然后移到下一个.将其涂成蓝色.

移动到下一个"可以通过使用+组合器(下一个同级)来完成.

"Move to the next one" can be done by using the + combinator (next sibling).

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

或者，正如下面评论部分中的Hamms建议的那样，您可以将4n+1和4n+2用作蓝色；否则，可以使用4n+1和4n+2. 4n+3和4n表示红色.

Or, as Hamms suggested in the comments section below, you can use 4n+1 and 4n+2 for blue; and 4n+3 and 4n for red.

这篇关于如何选择每两个元素交替?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！