tr:hover 中直接设置 color 无效是因为 color 不继承，且 td/th 的显式 color 会覆盖；应使用 tbody tr:hover td, tbody tr:hover th 设置；列选择用 :nth-child()；移动端需用 :active 或 JS；高对比度下需同步调整背景或边框。
直接给 tr 或目标文字容器加 :hover 就能实现，但“文字变红”常被误写成只改 color 而忽略继承链、选择器范围和默认样式干扰。
tr:hover 里改 color 为什么没反应？
多数情况是文字实际在 td 或 th 里，而 tr:hover { color: red; } 不会自动穿透生效——color 不像 background-color 那样能被子元素继承（除非子元素没设自己的 color）。
- 检查
td和th是否显式写了color，比如td { color: #333; }，这会覆盖tr:hover的颜色 - 更稳妥的写法是：直接作用于单元格，用
tbody tr:hover td, tbody tr:hover th { color: red; } - 如果表格用了深色主题或 CSS 变量，确认
red是否被变量覆盖（比如--text-color: var(--text-primary);）
只让某几列文字变红，怎么写选择器？
用 :nth-child() 精准定位列，避免影响整行其他内容。
- 第一列变红：
tbody tr:hover td:nth-child(1) { color: red; } - 第二和第四列同时变红：
tbody tr:hover td:nth-child(2), tbody tr:hover td:nth-child(4) { color: red; } - 注意：
th单独处理，比如表头也要响应，得加上th:nth-child(n) - 别用
td:first-child替代nth-child(1)，合并单元格（colspan）会让first-child错位
移动端点一下才变红，怎么让它“即时”响应？
iOS Safari 和部分安卓浏览器对 :hover 做了延迟或禁用，这不是 bug，是为触摸交互优化的设计。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
:hover实现关键提示，它只是增强项 - 若必须视觉反馈，加一条
tr:active { color: red; }，配合cursor: pointer提示可点击 - 真要跨设备统一行为，得用 JS 监听
touchstart+touchend切换 class，但纯 CSS 场景下不推荐 -
@media (hover: hover) and (pointer: fine)可包裹 hover 样式，明确只给鼠标设备生效，避免移动端误加载
最容易被忽略的是：文字颜色变化在高对比度模式或深色主题下可能不可见，red 在黑底上虽亮，但在灰底或系统强制配色下可能失效。真正健壮的做法是同步调整 background-color 或加边框，别只靠单一样式区分状态。
