:has()选择器配合td:nth-child(n)可实现列级hover效果，现代浏览器支持，需手动替换n值，旧版浏览器需JS降级处理，col标签无法实现背景高亮。
用 :has() 选择器配合 td:nth-child(n) 实现列级 hover
现代浏览器（Chrome 105+、Firefox 119+、Safari 16.4+）已支持 :has()，这是目前唯一能「从行内单元格反向影响整列」的纯 CSS 方案。关键思路是：当鼠标进入某列任意一个 td 或 th 时，给该列所有单元格加背景色。
假设表格结构标准（<thead><tr><th>...</th></tr></thead> + <tbody><tr><td>...</td></tr></tbody>），写法如下：
table:hover td:nth-child(1),
table:hover th:nth-child(1) {
background-color: #f0f8ff;
}
table:has(td:nth-child(1):hover, th:nth-child(1):hover) td:nth-child(1),
table:has(td:nth-child(1):hover, th:nth-child(1):hover) th:nth-child(1) {
background-color: #e6f2ff;
}
注意两点：:has() 必须搭配伪类（如 :hover）使用，不能单独写 table:has(td:nth-child(1))；nth-child(n) 的 n 要按实际列序手动替换（1 是第 1 列，2 是第 2 列……）。
IE/旧版 Chrome 中必须降级为 JavaScript 补充
:has() 在 IE、旧版 Edge 和部分安卓 WebView 中完全不生效，此时需用 JS 监听 mouseover 事件并动态加 class。核心逻辑是：获取触发事件的单元格列索引（cellIndex），再遍历所有 tr 找同列子元素。
立即学习“前端免费学习笔记（深入）”；
- 不要用
event.target.parentElement.children算索引——colspan会导致错位 - 优先用
event.target.cellIndex，它已自动处理跨列合并 - 给整列表格加
data-col-index属性或统一 class（如col-1）比反复查询更高效 - 务必在
mouseout时清除所有列高亮，避免残留
为什么不用 <col> 标签直接控制样式？
<col> 标签本身不渲染，只能设置极有限的属性（border、background、width、visibility），且 background 在多数浏览器中对 <col> 无效。即使写成：
<colgroup> <col class="highlight-col"> </colgroup>
再配 CSS col.highlight-col { background: yellow; }，也几乎不会显示背景色。所以不能依赖 <col> 实现 hover 高亮，它只适合静态列宽或边框控制。
性能与兼容性取舍要点
纯 CSS 方案（:has()）无 JS 开销，但 Safari 对复杂 :has() 表达式有重绘延迟；JS 方案可控性强，但要注意事件委托——直接给每个 td 绑定 mouseover 会大量创建监听器，应绑定到 table 上并用事件冒泡捕获。
如果项目需支持 Chrome 100 以下版本，建议用 JS；若仅面向新版桌面浏览器，CSS 方案更轻量。另外，nth-child(n) 在存在 colspan 的行中仍以 DOM 位置计数，不是视觉列位置——这点容易被忽略，导致高亮错列。
