本文介绍了如何选择每两个元素交替?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想每隔两行选择一次,并以该模式交替并重复.如何使用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+14n+2用作蓝色;否则,可以使用4n+14n+2. 4n+34n表示红色.

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.

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

09-21 06:05