如何使用CSS实现国际象棋棋盘的交错方格图案

问题说明 #

使用React+CSS Grid开发8*8国际象棋棋盘时，尝试通过:nth-child()伪类实现经典交错方格配色，现有写法无法实现相邻行方格颜色错位的预期效果，所有行的方格配色完全对齐。

现有实现代码 #

JSX渲染逻辑：

import React from 'react';
import './Board.css';

const column = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
const row = [1, 2, 3, 4, 5, 6, 7, 8];

const Board = () => {
  let board = [];

  for (let i = 7; i >= 0; i--) {
    for (let j = 0; j < column.length; j++) {
      board.push(`${column[j]}${row[i]}`);
    }
  }

  return (
    <div className='board-cont'>
      {board.map((sqr) => {
        return (
          <div className='board-sqr' id={sqr}>
            {sqr}
          </div>
        );
      })}
    </div>
  );
};

export default Board;

初始CSS样式：

.board-cont {
  text-align: center;
  display: grid;
  background: rgb(119, 149, 86);
  height: 501px;
  width: 501px;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.board-sqr {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  border: solid 1px black;
}

/* 错误规则：全局匹配偶数位方格，导致行配色无错位 */
.board-sqr:nth-child(even) {
  background-color: yellow;
}

原有写法的核心问题：全局选中所有偶数序号的方格，相当于给每一行的偶数列统一设置浅色，所有行配色完全对齐，不符合棋盘相邻行颜色错位相反的规则。

最终实现方案 #

不需要修改现有JSX渲染逻辑，纯CSS即可实现正确效果。
88棋盘的配色以两行共16个方格*为一个重复周期，通过:nth-child(An+B)公式精准命中每个周期内需要设置浅色的方格即可：

• 第1、3、5、7奇数行：偶数列方格使用浅色
• 第2、4、6、8偶数行：奇数列方格使用浅色
  直接替换原有错误的.board-sqr:nth-child(even)规则为以下代码：

/* 匹配所有需要设置浅色背景的棋盘格 */
.board-sqr:nth-child(16n + 2),
.board-sqr:nth-child(16n + 4),
.board-sqr:nth-child(16n + 6),
.board-sqr:nth-child(16n + 8),
.board-sqr:nth-child(16n + 9),
.board-sqr:nth-child(16n + 11),
.board-sqr:nth-child(16n + 13),
.board-sqr:nth-child(16n + 15) {
  /* 可替换为需要的浅色值，这里使用国际象棋经典浅米色 */
  background-color: #f0d9b5;
}

方案优势：

• 无JS侵入，不需要修改现有渲染逻辑，不用额外给方格动态计算、添加类名
• 纯CSS实现，无运行时计算开销，性能最优
• 选择器逻辑固定，不会随棋盘内容变化出现匹配错误

内容的提问来源于stack exchange，提问作者Casey Cling