Question

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

Black White
White Black
Black White
White Black

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

我如何实现这一目标？

Answer 1

您需要在此使用: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，......）。

＆＃13;

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

＆＃13;

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

＆＃13;

选项2

第二个选项使用negation pseudo class :not()的单个选择器获得相同的结果。

选项1中的反向选择可以使用4n-1和4n-2（或4n+3和4n+2）表示，因此我们将选择所有div ，不包括那些符合这些表达的内容。

＆＃13;

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

＆＃13;

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

＆＃13;

在MDN上阅读

<强> ASIDE

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

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

1 个答案: