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

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

Answer 1

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

选择每隔四个，然后选择下一个。颜色为红色。
选择每四分之一，然后前进两个，下一个。颜色为蓝色。

“移动到下一个”可以使用nawk '{print FILENAME"\,"$0}' test1组合子（下一个兄弟）完成。

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

或者，正如Hamms在下面的评论部分中所建议的那样，您可以将<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。

Answer 2

你可以使用ng-repeat - 列表的长度，无论如何。 https://jsbin.com/vizacewixe/edit?html,css,js,output

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

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

Answer 3

使用li:nth-child(4n)和li:nth-child(4n-1)选择器更为简单。检查以下代码。

ul{
  list-style-type: none;
  color: white;
}
li{
  background-color:blue;
}
li:nth-child(4n),
li:nth-child(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>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

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

3 个答案: