css 本身不支持直接选择表格列（`
在 HTML 表格中，原生
✅ 正确做法如下：
-
为每一列的单元格添加语义化类名（如 col-1, col-2），确保
和对应列下的所有 均拥有相同类； - 为该类设置初始过渡属性（推荐明确指定 background-color 而非 all，提升性能与可预测性）；
- 利用父容器（如
）或单元格自身触发 :hover：若希望“鼠标移入任意单元格即高亮整列”，需借助 :hover 作用于该列所有单元格——但由于 CSS 无法向上选择父列，最可靠方案是：为每个 / 添加类，并在该类上定义 :hover，同时使用相邻兄弟选择器或 JS 辅助实现列联动（纯 CSS 推荐前者）。但更简洁、兼容性更好的实践是：让整列高亮响应“鼠标进入该列任一单元格”事件，即直接对 .col-1:hover 等生效——这要求每个单元格独立响应 hover，视觉上等效于列悬停。 示例代码：
姓名 年龄 城市 张三 28 北京 李四 32 上海 /* 统一为列单元格设置过渡 */ .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。
-
标签虽可设 background-color，但不支持 :hover，且多数浏览器忽略其背景渲染，故不可依赖。
总结：表格列悬停的本质是列单元格的协同样式响应。通过结构化类名 + 精确过渡 + 语义化标记，即可在不依赖 JS 的前提下，实现专业、流畅的列级交互效果。
