color属性对表格文字生效的前提是td/th元素自身未被更具体的样式覆盖。需显式设置td和th的颜色，避免依赖table或tr的color继承，因浏览器默认样式及内联样式常干扰继承。
color 属性对表格文字生效的前提是什么
直接给 <table> 或 <code><tr> 设置 <code>color CSS 属性，**不会自动继承到 <td> 或 <code><th> 里的文字上**——除非这些单元格元素自身没有覆盖颜色的样式（比如内联 <code>style="color: black"）或更具体的 CSS 规则。浏览器默认会让 color 向下继承，但表格单元格常被用户样式、浏览器默认样式（如某些 UA 样式对 <th> 设了加粗+深色）干扰。
<h3>最稳妥的写法：直接作用于 <code>td 和 th
别依赖父级 color 的继承，显式设置单元格文字颜色更可靠：
table.my-table td,
table.my-table th {
color: #2c3e50;
}
- 用类名（如
my-table）限定范围，避免污染其他表格 - 必须同时写
td和th，因为它们是独立元素，th默认可能有不同颜色 - 如果只改某列，可用
td:nth-child(2)或带 class 的单元格（如td.status-cell）
内联 style 写法及其风险
在单元格里直接写 style="color: red" 能立刻生效，但容易失控：
- 每个
<td> 都加内联样式 → 维护成本高，无法统一调整 <li>和外部 CSS 冲突时，内联样式优先级最高，反而难覆盖</li> <li>若用 JavaScript 动态设 <code>element.style.color，记得检查是否被!important锁死 <td> 里嵌套了 <code><span></span>或<p></p>，而这些子元素自己设置了color—— 父级颜色不覆盖子元素显式声明- CSS 选择器权重不够，比如你写了
table td { color: blue; }，但别人写了table.data-table tbody tr:hover td { color: white !important; } - 用了
currentColor或透明色（如color: rgba(0,0,0,0)），看起来像没生效 - 字体本身是 SVG 图标或伪元素（
::before），它们不响应color，得单独设fill或color
常见失效场景和排查点
明明写了 color 却没变色？大概率是以下原因：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
继承不是魔法，是规则；表格里颜色要稳，就得管到具体单元格这一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
