:nth-child(odd/even)仅按DOM顺序筛选，无法识别行列，故不能直接实现棋盘格；需结合行列表达式（如.row:nth-child(odd) .cell:nth-child(odd)）或改用grid/repeating-gradient等现代方案。
:nth-child(odd) 和 :nth-child(even) 本身只能按元素在父容器中的**位置序号**筛选，无法直接实现二维棋盘格（比如 4×4、8×8）的黑白交替——它们不理解“行”和“列”的概念，只认“第1个、第2个、第3个……子元素”。真要靠纯 :nth-child 模拟棋盘，得用数学表达式手动展开周期规律。
为什么 :nth-child(odd) 单独用会错行？
假设你写 div:nth-child(odd) { background: black; }，它会把父容器里所有子 div 按 DOM 顺序标号：第1、3、5、7…个涂黑。如果每行放4个格子，那第1行是 1–4，第2行是 5–8……此时第1行的奇数位（1,3）黑，第2行的奇数位（5,7）也黑——结果就是两行都左黑右白，完全不是棋盘交叉效果。
用 :nth-child(2n+1) 配合行列结构才能逼近棋盘
关键在于：必须让每行的起始序号对齐模运算周期。常见做法是把 HTML 写成每行一个 div.row，每个格子是 div.cell，再结合行号与列号计算总偏移：
/* 假设每行4格，共4行 */
.row:nth-child(odd) .cell:nth-child(odd),
.row:nth-child(even) .cell:nth-child(even) {
background: #000;
}这利用了“奇数行的奇数列 + 偶数行的偶数列”统一为黑格的逻辑。但注意：
立即学习“前端免费学习笔记（深入）”；
- 必须保证每行
.cell数量严格一致，否则:nth-child(even)会跨行匹配错位 - 不能有其他类型子元素（如注释、文本节点、
span）混在.row或.cell中，否则序号全乱 - 响应式换行（flex wrap / grid）会让此方案彻底失效——
:nth-child不响应布局变化
真正可靠的棋盘格该用 grid 或 repeating-linear-gradient
现代 CSS 有更稳的方式：
— 用 display: grid + background 渐变：
.chessboard {
display: grid;
grid-template-columns: repeat(8, 1fr);
background:
repeating-linear-gradient(0deg, #000, #000 1px, transparent 1px, transparent 2px),
repeating-linear-gradient(90deg, #000, #000 1px, transparent 1px, transparent 2px);
background-size: 2rem 2rem;
background-position: 0 0;
}— 或用 grid 定位每个格子，配合 nth-of-type（更语义）或 JS 动态加类。
纯 :nth-child(odd/even) 的“复杂棋盘格”本质是硬凑数学周期，比如 8×8 棋盘可写成：:nth-child(16n+1), :nth-child(16n+3), ..., :nth-child(16n+14)——列出来就 32 个选择器，维护成本高且不可读。
真正卡住的地方往往不是语法写不对，而是忘了 :nth-child 只数 DOM 顺序，不数视觉位置；一旦 HTML 结构松动或 CSS 布局改变，整个棋盘就崩。
