Angular中表格行CSS样式被表格单元格样式覆盖问题

问题原因 #

你遇到的是两个核心问题：

1. 样式作用元素不匹配：你给<tr>标签加了background-color，但第三方样式直接给<td>设置了白色背景，td的背景会完全覆盖tr的背景；
2. CSS选择器优先级差异：body .ui-table .ui-table-tbody>tr>td这个选择器的优先级远高于单独的.flow-row类，就算tr的样式优先级足够，也会被td的高优先级样式覆盖。

解决方案 #

方案1：精准选中目标td（推荐）

修改自定义CSS，直接选中.flow-row行下的所有td，同时对齐第三方选择器的结构来提升优先级，确保能覆盖原有样式：

body .ui-table .ui-table-tbody>tr.flow-row>td {
  height: 28px;
  background-color: blue;
}

这个选择器的优先级和第三方样式完全一致，只要你的自定义样式在第三方UI库样式之后加载，就会自动覆盖原有样式。

如果觉得选择器太长，也可以简化为（优先级略低，但多数场景下也能生效）：

.ui-table tr.flow-row > td {
  height: 28px;
  background-color: blue;
}

方案2：使用!important（应急用，不推荐）

如果上面的方法无法生效，可以临时用!important强制样式生效，但不建议长期使用——它会破坏CSS的优先级规则，增加后续样式维护的难度：

.flow-row > td {
  height: 28px;
  background-color: blue !important;
}

额外提示 #

• 务必保证你的自定义CSS文件在第三方UI库的样式文件之后引入，这样相同优先级的样式，后加载的会覆盖先加载的；
• 不要直接修改第三方库的原始样式文件，否则后续更新库时你的修改会被覆盖。

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