怎么在CSS3中用:nth-child(odd)与(even)做复杂棋盘格？-css教程-PHP中文网

:nth-child(odd/even)仅按DOM顺序筛选，无法识别行列，故不能直接实现棋盘格；需结合行列表达式（如.row:nth-child(odd) .cell:nth-child(odd)）或改用grid/repeating-gradient等现代方案。

怎么在css3中用:nth-child(odd)与(even)做复杂棋盘格？

: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 有更稳的方式：

CSS工具箱(专业版)

全功能 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 布局改变，整个棋盘就崩。