background-color在col上无效，因其不渲染为可视盒子；应使用thead th:nth-child(n)和tbody td:nth-child(n)联合选择器设置列背景色，并配合border-collapse: collapse。
background-color 在 col 上根本不起作用，这不是写法问题，是浏览器按规范主动忽略——col 不渲染为可视盒子，没有背景绘制层。
为什么 col 上写 background-color 没反应
你看到的“没效果”，不是 CSS 权重低、没加 !important 或浏览器兼容问题。而是：col 元素本身不参与渲染，它只是语义占位符，所有背景类样式（包括 background-color、background-image）都会被忽略。Chrome 里偶尔显示一点底色，是空白区域的偶然渲染，Safari/Firefox 下基本不可见，且完全不可靠。
col 真正支持哪些样式属性
能用的只有这几个（其他写了也白搭）：
-
width：最常用，设列宽（px/%/auto） -
background：注意是整个background声明（如background: linear-gradient(...) #fff），但单独写background-color无效 -
border：部分浏览器支持列边框，但兼容性差，不推荐依赖 -
visibility: collapse：隐藏整列，比display: none更规范
color、font-size、padding、text-align 这些全都不起作用，别在 col 上浪费调试时间。
真正批量设列背景色的可靠写法
必须用 nth-child() 同时命中 thead th 和 tbody td，例如给第 2 列设浅蓝背景：
tbody tr td:nth-child(2) {
background-color: #e6f7ff;
}
thead tr th:nth-child(2) {
background-color: #bae7ff;
}
关键点：
- 必须分开写
tbody和thead，只写td:nth-child(2)会漏掉表头 - 不能用
tr > td:nth-child(2)，遇到colspan时子选择器失效，而nth-child(2)仍可靠（只要 HTML 中该列单元格确实是父元素下第二个子节点） - 记得在
table上加border-collapse: collapse，否则列背景会被默认边框间隙割裂成断续条纹 - 列数不固定时，改用
nth-last-child(-n+2)更鲁棒，比如最后两列统一着色，不用关心总列数
colgroup 的正确位置和结构
colgroup 必须是 table 的直接子元素，且要在 caption 之后、thead 之前。每个 col 要与表格实际列数严格对应：
- 4 列表格就写 4 个
<col>，或用span="2"表示覆盖接下来连续 2 列（不是“跨 2 列”） - 漏写或写多一个
col，会导致后续列样式锚点错位 -
col上的class可以留着供 JS 标记或控制width，但别指望它驱动背景色
真正难的不是写对选择器，而是确保 HTML 结构中列序一致、colgroup 位置合规、且 border-collapse 已启用——这三个点漏掉任何一个，颜色都会出岔。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
