CSS nth-child(2n)选择偶数列技巧

CSS中使用nth-child(2n)看似能轻松选中偶数列，实则常因误解其作用机制而失效——它按每行内单元格的序号匹配，而非整张表格的列序号；真正可靠的列样式方案需借助col:nth-child（需配合colgroup结构）或显式书写tr td:nth-child(2n)等组合选择器，同时须警惕IE8及以下浏览器的兼容性限制，必要时需回退至服务端标记或JavaScript动态处理，看似简单的“隔列变色”背后，实则是HTML结构、CSS能力与浏览器支持的精细协同。

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 + 结构约束。更可靠的是：

• 在 中定义 元素，然后对 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
• 如果表格是动态生成的，且没写 ，那 col:nth-child 根本没目标可选
• 用 tr td:nth-child(2n) 在超大表格（千行以上）中可能触发重排，但日常场景感知不到

列样式看着简单，但真要跨浏览器稳稳生效，得先确认结构里有没有 colgroup，再决定用 CSS 还是退到 JS；否则很容易调半天发现只是 selector 没命中。

今天关于《CSS nth-child(2n)选择偶数列技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！