css - 仅使用 css 每行每行交替颜色

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, ...).

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) 所以我们将选择所有 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,5,8,9,12,13,16,17,20,...,2n-(n%2)