如何根据条件覆盖表格行CSS类，解决背景色不生效问题？

这是典型的CSS优先级冲突问题——.table-striped tbody tr:nth-of-type(odd)这个选择器的特异性比alert-primary更高，所以即便你给目标行加上了alert类，它的背景色样式还是会被表格的条纹样式覆盖，哪怕加了!important也可能因为权重计算规则不生效（或是你没把!important加到正确的位置）。

这里有几个实用的解决思路：

• 提升自定义样式的选择器特异性
  写一个权重更高的CSS选择器，确保能覆盖Bootstrap的条纹样式：

  .table-striped tbody tr.alert-primary:nth-of-type(odd) {
    background-color: #0d6efd !important; /* 这里用alert-primary默认背景色，也可替换为你需要的颜色 */
  }
  

  这个选择器结合了表格类、tbody元素、tr元素、alert-primary类和伪类，特异性远高于原生的条纹样式，能保证样式生效。

• 使用内联样式快速解决
  如果你不想额外编写CSS，可以直接给tr标签添加内联样式，内联样式的优先级是最高的：

  <tr style="@(item.Assigneee == UserSession.User.Id ? "background-color: #0d6efd;" : "")" class="@(item.Assigneee == UserSession.User.Id ? "" : " ")">
  

  这种方式不需要依赖alert类，直接指定背景色，肯定能覆盖表格的条纹样式。

• 调整alert类的应用位置
  把alert类从tr标签转移到td标签上，让alert的背景色直接作用于单元格，就不会和tr的条纹样式冲突了：

  <tr>
    <td class="@(item.Assigneee == UserSession.User.Id ? "alert alert-primary" : "")">...</td>
    <!-- 其他td单元格同理 -->
  </tr>
  

你提到已经成功给tr加上了alert alert-primary odd类但样式被划掉，本质就是因为Bootstrap条纹样式的选择器权重更高导致的。上面的方法都能解决这个问题，优先推荐第一个方法，它更符合CSS模块化规范，不会污染全局样式。

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