Bootstrap 5.3中无法为表格行设置文本颜色的问题求助

问题原因 #

Bootstrap 5.3里，表格的<td>元素默认自带文本颜色样式（color: var(--bs-body-color)），这个样式的优先级高于<tr>上的text-*类，导致<tr>的颜色设置没法被子元素<td>继承。而fw-bold能生效，是因为<td>没有默认的字体粗细样式，会直接继承<tr>的设置。

解决方案 #

不用逐个给<td>加样式，以下两种方法就能实现整行文本变色：

方法1：自定义CSS类匹配<tr>下的<td>

添加一段自定义CSS，直接给目标行内的所有<td>设置颜色：

/* 自定义类，对应primary主题色 */
.tr-text-primary td {
    color: var(--bs-primary);
}

然后在<tr>上使用这个类：

<tr class="fw-bold tr-text-primary">
   <td>Java</td>
   <td>Php</td>
   <td>Javascript</td>
   <td>Go</td>
</tr>

如果需要其他颜色（比如secondary、success），只需复制这个类，把--bs-primary替换为对应的Bootstrap颜色变量即可，比如--bs-secondary、--bs-success。

方法2：增强text-*类的优先级

要是不想新增自定义类，可以通过CSS选择器提升<tr>上text-*类的优先级，让它能作用到<td>：

tr.text-primary td {
    color: var(--bs-primary);
}
tr.text-secondary td {
    color: var(--bs-secondary);
}
/* 按需添加其他text-*类的对应规则 */

这样就能直接沿用你原来的写法：

<tr class="fw-bold text-primary">
   <td>Java</td>
   <td>Php</td>
   <td>Javascript</td>
   <td>Go</td>
</tr>

注意事项 #

• 尽量不用!important强制覆盖，通过选择器优先级控制更符合CSS规范。
• 用Bootstrap的颜色变量（--bs-primary、--bs-secondary等）能保证颜色和框架风格统一，避免手动写十六进制颜色值。

内容的提问来源于stack exchange，提问作者Zuby