每个div每行的交替颜色仅使用css

Question

我想知道这是否只能使用CSS:

Black White
White Black
Black White
White Black

名称代表我想要的颜色背景.在这个jsfiddle中,我已经硬编码以准确显示我想要的是什么,但div的数量将是动态的,所以我不知道会有多少.

我该如何实现这一目标？

Answer 1

你需要在这里使用伪类.:nth-child

选项1

第一个选项需要使用2个选择器

第一个处理网格左列中div的样式.编号那些给我们1,5,9,13,...你可以表示为4n-3(4*1-3 = 1,4*2-3 = 5,4*3-3 = 9,4*4- 3 = 13,......).4n+1如果您愿意,也可以表示为.

第二个选择器,用于处理右列中div的样式,更简单,因为它只是每四个div,可以表示为4n(4*1 = 4,4*2 = 8,4*3 = 12, 4*4 = 16,......).

div{
  background:#fff;
  display:inline-block;
  height:100px;
  width:50%;
}
div:nth-child(4n-3),div:nth-child(4n){
  background:#000;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

方案2

第二个选项使用否定伪类:not()使用单个选择器实现相同的结果.

可以使用4n-1和4n-2(或4n+3和4n+2)来表示对选项1中的反向选择,因此我们将选择所有div,排除那些与这些表达式匹配的div.

div{
    background:#fff;
    display:inline-block;
    height:100px;
    width:50%;
}
div:not(:nth-child(4n-1)):not(:nth-child(4n-2)){
    background:#000;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

在MDN上阅读更多内容

• CSS伪类概述
• 有关:nth-child伪类的更多信息
• 有关否定伪类的更多信息

在旁边

我尽力提出一个单独的CSS表达式来适应这个但不能.如果有人这样做,请告诉我.我们希望匹配的顺序是:1,4,5,8,9,12,13,16,17,20,...,2n-(n%2)