兩列交替 colors 和 CSS

Question

我正在嘗試使用備用 colors （第一個單元格紅色，第二個黃色，第三個黃色，第四個紅色等）創建一個 2 列網格

使用 3 cols 網格我沒問題，但是使用這種布局我會發瘋 =_=

有人可以幫助我嗎？

謝謝

剎車

Answer 1

您可以使用此選擇器:nth-child() ：

/*Every 2 rows from 0 (even) - Every 2 cells from 0 (even)*/
.row:nth-child(2n+0) div:nth-child(2n+0) { 
    background: #ff0000;
}

/*Every 2 rows from 0 (even) - Every 2 cells from 1 (odd)*/
.row:nth-child(2n+0) div:nth-child(2n+1) {
    background: #ffff00;
}

/*Every 2 rows from 1 (odd) - Every 2 cells from 0 (even)*/
.row:nth-child(2n+1) div:nth-child(2n+0) {
    background: #ffff00;
}

/*Every 2 rows from 1 (odd) - Every 2 cells from 1 (odd)*/
.row:nth-child(2n+1) div:nth-child(2n+1) {
    background: #ff0000;
}

演示版

可以這樣簡化：

.row:nth-child(even) div:nth-child(even) {
    background: #ff0000;
}
.row:nth-child(even) div:nth-child(odd) {
    background: #ffff00;
}
.row:nth-child(odd) div:nth-child(even) {
    background: #ffff00;
}
.row:nth-child(odd) div:nth-child(odd) {
    background: #ff0000;
}

演示版

---

文獻資料

Answer 2

如果您使用的 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 網格布局有兩列，則不能使用行，但可以使用以下代碼段：

div:first-child, 
div:nth-child(4n), 
div:nth-child(4n+1) {
 background-color: #f00;
}