html - 有条件地覆盖表上的 CSS 类

Question

我有一张装饰有以下类的 table :

<table class="table table-striped table-borderless nowrap">

对于某些用户，我想这样更改行的背景颜色:

<tr class="@(item.Assigneee == UserSession.User.Id  ? "alert alert-primary" : " ")">

但我无法让它覆盖表类。我尝试添加 !important，但它仍然显示来自表格类的背景颜色。

我看到类已添加:

<tr class="alert alert-primary odd" role="row">

但是背景颜色被删除了，它仍然被显示为:

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

Answer 1

以这种方式自定义您的 CSS。

对于 Bootstrap 4

.table-striped tbody tr:not(.alert-primary):nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

对于 Bootstrap 3.7

.table-striped>tbody>tr:not(.alert-primary):nth-of-type(odd) {
    background-color: #f9f9f9;
}