css没有奇数列或偶数列选择器，因列是视觉概念而非dom结构；仅表格中可通过tr td:nth-child(odd/even)按行内顺序选列；grid中可依固定列数用:nth-child公式模拟；flex和响应式布局下无法可靠实现。
CSS 本身没有直接的 “奇数列” 或 “偶数列” 选择器 —— 因为列（column）不是 DOM 中的兄弟元素关系，而是一个视觉/布局层面的概念。所谓“第几列”，取决于容器布局方式（table、grid、flex）和子元素排列顺序，CSS 伪类只能基于 DOM 结构做匹配，不能感知二维网格中的列位置。
表格中用 td:nth-child(even) 选偶数列
表格是唯一有明确行列语义的 HTML 结构，td 和 th 的列位置由其在 tr 内的顺序决定。所以「第几列」=「该行内第几个 td」。
-
tr td:nth-child(odd)匹配每行的第 1、3、5… 列单元格 -
tr td:nth-child(even)匹配每行的第 2、4、6… 列单元格 - 注意：必须写成
tr td:nth-child(...)，不能只写td:nth-child(...)—— 否则会匹配整个文档中所有td的 DOM 序号，而非每行内的列序号 - 如果某行
td数量不一致（比如用了colspan），:nth-child仍按实际标签位置计算，不是按视觉列对齐后的逻辑列
Grid 布局中靠 nth-child 公式模拟列选择
当使用 display: grid 且列数固定（如 grid-template-columns: repeat(4, 1fr)），子项按行优先顺序填入，此时可通过公式算出「属于第 n 列」的元素：
- 假设 4 列，则第 1 列元素是
:nth-child(4n + 1)（即 1, 5, 9, 13…） - 第 2 列是
:nth-child(4n + 2)（2, 6, 10, 14…） - 偶数列 = 第 2 列 + 第 4 列 →
:nth-child(4n + 2), :nth-child(4n + 4) - 奇数列 = 第 1 列 + 第 3 列 →
:nth-child(4n + 1), :nth-child(4n + 3) - 这个方法依赖列数固定且子项顺序与渲染顺序严格一致；若用
grid-auto-flow: column，公式要反过来（按列优先），且更难维护
Flex 布局无法可靠选“偶数列”
Flex 是一维布局，flex-wrap: wrap 后的“行”或“列”只是视觉换行，DOM 顺序仍是线性的。:nth-child 只认源顺序，不认折行后的位置。
- 写
div:nth-child(even)选的是第 2、4、6… 个子元素，跟它们最终落在第几列毫无关系 - 响应式断点变化时，列数动态改变，公式失效
- 真要按列样式区分，得靠 JS 动态加 class，或服务端预计算列索引并注入
data-col="2"类属性
真正需要按列控制样式时，别指望纯 CSS 自动识别“第几列”——它没这个能力。要么用表格语义（最稳妥），要么在 Grid 中手动写死列数+公式（需同步维护），要么放弃伪类、改用数据属性驱动样式。最容易被忽略的一点是：:nth-child 的括号里填的是 DOM 位置，不是视觉位置；一旦布局机制脱离线性流（比如浮动、绝对定位、多列文本），这个选择器就彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
