<分区>
我的问题图片:
我正在尝试使用 html 和 css 创建一个棋盘，当我尝试为我创建的每个 div block 添加背景颜色时，它们看起来像上图一样。我想要一个棋盘格图案穿过棋盘，而不是一堆颜色相同的列沿着棋盘向下。我正在尝试在 css 中使用第 nth-child 伪选择器，但我不知道应该使用哪种公式来获得方格图案。第二行应该是绿色、灰色、绿色、灰色等。
我使用了一大堆 div 类来创建所有不同的 block ，并将它们编号为 1 到 64。我使用网格来创建棋盘。我的 pusedo 选择器位于我的 CSS 代码的最底部。
这是我的 html:
<body>
<div class="grid-container">
<div class="item1"><img src="images/black_rook.png" height="65px" width="65px"></div>
<div class="item2"><img src="images/black_knight.png" height="65px" width="65px"></div>
<div class="item3"><img src="images/black_bishop.png" height="65px" width="65px"></div>
<div class="item4"><img src="images/black_queen.png" height="65px" width="65px"></div>
<div class="item5"><img src="images/black_king.png" height="65px" width="65px"></div>
<div class="item6"><img src="images/black_bishop.png" height="65px" width="65px"></div>
<div class="item7"><img src="images/black_knight.png" height="65px" width="65px"></div>
<div class="item8"><img src="images/black_rook.png" height="65px" width="65px"></div>
<div class="item9"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item10"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item11"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item12"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item13"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item14"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item15"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item16"><img src="images/black_pawn.png" height="65px" width="65px"></div>
<div class="item17"></div>
<div class="item18"></div>
<div class="item19"></div>
<div class="item20"></div>
<div class="item21"></div>
<div class="item22"></div>
<div class="item23"></div>
<div class="item24"></div>
<div class="item25"></div>
<div class="item26"></div>
<div class="item27"></div>
<div class="item28"></div>
<div class="item29"></div>
<div class="item30"></div>
<div class="item31"></div>
<div class="item32"></div>
<div class="item33"></div>
<div class="item34"></div>
<div class="item35"></div>
<div class="item36"></div>
<div class="item37"></div>
<div class="item38"></div>
<div class="item39"></div>
<div class="item40"></div>
<div class="item41"></div>
<div class="item42"></div>
<div class="item43"></div>
<div class="item44"></div>
<div class="item45"></div>
<div class="item46"></div>
<div class="item47"></div>
<div class="item48"></div>
<div class="item49"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item50"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item51"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item52"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item53"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item54"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item55"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item56"><img src="images/white_pawn.png" height="65px" width="65px"></div>
<div class="item57"><img src="images/white_rook.png" height="65px" width="65px"></div>
<div class="item58"><img src="images/white_knight.png" height="65px" width="65px"></div>
<div class="item59"><img src="images/white_bishop.png" height="65px" width="65px"></div>
<div class="item60"><img src="images/white_queen.png" height="65px" width="65px"></div>
<div class="item61"><img src="images/white king.png" height="65px" width="65px"></div>
<div class="item62"><img src="images/white_bishop.png" height="65px" width="65px"></div>
<div class="item63"><img src="images/white_knight.png" height="65px" width="65px"></div>
<div class="item64"><img src="images/white_rook.png" height="65px" width="65px"></div>
</div>
<script src="interactive.js"></script>
</body>
</html>
这是我的CSS:
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.grid-container {
display: grid;
border: 3px solid black;
grid-auto-columns: 68px;
grid-auto-rows: 75px;
height: 600px;
width: 40%;
border-radius: 5px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
}
.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3; }
.item4 { grid-area: 1 / 4; }
.item5 { grid-area: 1 / 5; }
.item6 { grid-area: 1 / 6; }
.item7 { grid-area: 1 / 7; }
.item8 { grid-area: 1 / 8; }
.item9 { grid-area: 2 / 1; }
.item10 { grid-area: 2 / 2; }
.item11 { grid-area: 2 / 3; }
.item12 { grid-area: 2 / 4; }
.item13 { grid-area: 2 / 5; }
.item14 { grid-area: 2 / 6; }
.item15 { grid-area: 2 / 7; }
.item16 { grid-area: 2 / 8; }
.item17 { grid-area: 3 / 1; }
.item18 { grid-area: 3 / 2; }
.grid-container div:nth-child(odd){
background-color: gray;
}
.grid-container div:nth-child(even) {
background-color: green;
}