CSS如何选择表格中的偶数列_利用nth-child(2n)选择器控制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 + 结构约束。更可靠的是：

• 在 <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 没命中。