我想知道这是否只能使用CSS：
Black White White Black Black White White Black
名称代表我想要的颜色背景.在这个jsfiddle中,我已经硬编码以准确显示我想要的是什么,但div的数量将是动态的,所以我不知道会有多少.
我该如何实现这一目标？
解决方法
您需要在此处使用
:nth-child
pseudo class.
选项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
第二个选项使用negation pseudo class :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
> Overview of CSS pseudo classes
> More information on the :nth-child pseudo class
> More information on the negation pseudo class
在旁边
我尽力提出一个单独的CSS表达式,但不能.如果有人这样做,请告诉我.我们希望匹配的顺序是：1,4,8,12,16,17,20,...,2n-(n%2)
