css 本身不支持直接选择表格列（`
在 HTML 表格中，原生 <col> 元素不接受 :hover 伪类，也无法直接设置背景色或过渡动画——因为 <col> 仅是列的语义占位符，不具备渲染能力。因此，实现“整列悬停变色+过渡”的关键在于：将列的视觉控制权交给实际渲染的单元格（<td> 和 <th>），并通过统一的类名进行批量样式管理。
✅ 正确做法如下：
- 为每一列的单元格添加语义化类名（如 col-1, col-2），确保 <th> 和对应列下的所有 <td> 均拥有相同类；
- 为该类设置初始过渡属性（推荐明确指定 background-color 而非 all，提升性能与可预测性）；
- 利用父容器（如 <tr>）或单元格自身触发 :hover：若希望“鼠标移入任意单元格即高亮整列”，需借助 :hover 作用于该列所有单元格——但由于 CSS 无法向上选择父列，最可靠方案是：为每个 <td>/<th> 添加类，并在该类上定义 :hover，同时使用相邻兄弟选择器或 JS 辅助实现列联动（纯 CSS 推荐前者）。但更简洁、兼容性更好的实践是：让整列高亮响应“鼠标进入该列任一单元格”事件，即直接对 .col-1:hover 等生效——这要求每个单元格独立响应 hover，视觉上等效于列悬停。
示例代码：
<table>
<thead>
<tr>
<th class="col-1">姓名</th>
<th class="col-2">年龄</th>
<th class="col-3">城市</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-1">张三</td>
<td class="col-2">28</td>
<td class="col-3">北京</td>
</tr>
<tr>
<td class="col-1">李四</td>
<td class="col-2">32</td>
<td class="col-3">上海</td>
</tr>
</tbody>
</table>/* 统一为列单元格设置过渡 */
.col-1, .col-2, .col-3 {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 悬停时整列变色（注意：每个单元格独立触发，视觉连贯） */
.col-1:hover { background-color: #e3f2fd; color: #1976d2; }
.col-2:hover { background-color: #e8f5e9; color: #388e3c; }
.col-3:hover { background-color: #fff3cd; color: #856404; }⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免使用 transition: all 2s：会导致所有属性（如 border、padding）意外动画，影响性能且难以调试；应显式声明需过渡的属性（如 background-color）。
- 若需“鼠标进入某一行时高亮该行所在列”，纯 CSS 无法跨行关联，此时建议用 JavaScript 监听 mouseenter 并动态添加列级 class。
- <col> 标签虽可设 background-color，但不支持 :hover，且多数浏览器忽略其背景渲染，故不可依赖。
总结：表格列悬停的本质是列单元格的协同样式响应。通过结构化类名 + 精确过渡 + 语义化标记，即可在不依赖 JS 的前提下，实现专业、流畅的列级交互效果。
