color是唯一合法的文字颜色属性，font-color无效；它仅作用于文本前景色，与背景和边框颜色无关；常见失效原因包括浏览器默认样式覆盖、内联style权重过高、选择器范围不当或深色模式适配缺失。
直接用 color，别写 font-color
font-color 不是合法 CSS 属性，浏览器直接忽略。所有文字颜色必须用标准的 color 属性。它只作用于文本内容本身，和 background-color、border-color 互不干扰。
常见翻车点：
- 在 th 上设了 color: red，但没生效 → 很可能是浏览器默认样式权重更高（比如 Chrome 给 th 加了 color: -internal-light-dark(black, white)），检查开发者工具里该属性是否被划掉
- 给 table 设了 color，但某些 td 还是黑的 → 那些单元格可能有内联 style="color: black" 或更具体的选择器覆盖了继承值
按范围控制：整表 / 表头 / 单列 / 特定单元格
不同目标，选不同选择器，避免无谓的权重冲突： - 整表统一文字色：table { color: #333; }（td 和 th 默认继承）
- 只改表头：th { color: #2c3e50; }，或更稳妥地写成 table th { color: #2c3e50; }
- 控制第二列所有单元格：td:nth-child(2), th:nth-child(2) { color: #e74c3c; }
- 精准到某个单元格：加类名最可靠，比如 <td class="urgent"> overdue </td>，再配 .urgent { color: #d32f2f; }
注意：nth-child 从行内位置计数，不是从视觉列数；合并单元格（colspan）不影响其定位逻辑
内联 style 能用，但得清楚代价
style="color: blue" 确实立刻生效，适合临时调试或 CMS 输出无法改 CSS 的场景。但它有硬伤：
- 权重高于外部样式表规则，后续想用 CSS 类统一调整时会被卡住
- JS 动态渲染表格时，如果把 color 拼在 HTML 字符串里（如 `<td style="color:${statusColor}">`），颜色逻辑就散落在模板中，难维护、难测试
- 如果用了 <code>rgba(0,0,0,0.7)，IE8 及更老版本会完全不渲染文字（透明度不支持）
深色模式下颜色可能“失效”
现代浏览器支持color-scheme: dark 或系统级深色偏好，而 color 值本身不会自动适配。比如设了 color: black，在深色模式下文字就看不见了。
应对方式：
- 用语义化颜色关键词（如 color: CanvasText;），实际渲染由系统决定
- 或用媒体查询主动适配：@media (prefers-color-scheme: dark) { th { color: #e0e0e0; } }
- 别依赖纯黑白硬编码，尤其当背景也由 CSS 控制时，color 和 background-color 必须成对验证可读性
事情说清了就结束。真正卡住的，往往不是“怎么设”，而是“为什么设了没反应”——多看一眼开发者工具里最终计算出的 color 值，比反复改 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
