nth-child(2n) 为什么选不到偶数列？
因为 nth-child 作用在行内单元格（td 或 th）上时，是按「父元素中的子元素序号」计算的，而表格中每行的 td 都是各自 tr 的子元素——所以 td:nth-child(2n) 选的是**每行里的第 2、4、6… 个单元格**，不是整个表格的第 2、4、6… 列。这是最常被误解的一点。
真正选择“第2列、第4列”的正确写法
必须用列选择器 col 配合 :nth-child，或者用 td:nth-of-type + 结构约束。更可靠的是：
- 在
<colgroup></colgroup>中定义<col>元素，然后对col:nth-child(2n)设置样式（仅支持部分 CSS 属性，如background、width） - 直接写
tr td:nth-child(2n), tr th:nth-child(2n)—— 这才是实际生效的列定位方式 - 如果表格有表头，且
th和td数量一致，可以合并写成tr > :nth-child(2n)，但需注意兼容性
示例：
table { border-collapse: collapse; }
col:nth-child(2n) { background-color: #f5f5f5; }
/* 或 */
tr td:nth-child(2n), tr th:nth-child(2n) { background-color: #f5f5f5; }
IE8 及更老浏览器不支持 nth-child 怎么办？
nth-child 在 IE9+ 才原生支持。如果必须兼容 IE8，没有纯 CSS 解法，只能：
- 服务端渲染时给偶数列单元格加 class，比如
col-2、col-4 - 用 JS 遍历
tr，再取每个tr下的第 2、4… 个td，手动加 class - 放弃“列样式”，改用 JS 控制或换成交互式高亮（比如 hover 整行）
注意：nth-of-type 在 IE8 也不支持，别指望它替代。
立即学习“前端免费学习笔记（深入）”；
用 col:nth-child 影响性能吗？
几乎不影响。浏览器对 col 元素的样式处理非常轻量，尤其只设 background、width 这类属性时。但要注意：
-
col上设置color、font-size等文本相关样式无效，它们不会继承到td - 如果表格是动态生成的，且没写
<colgroup></colgroup>，那col:nth-child根本没目标可选 - 用
tr td:nth-child(2n)在超大表格（千行以上）中可能触发重排，但日常场景感知不到
列样式看着简单，但真要跨浏览器稳稳生效，得先确认结构里有没有 colgroup，再决定用 CSS 还是退到 JS；否则很容易调半天发现只是 selector 没命中。
