Question

我想改变Bootstrap表条纹的颜色。我读过这个问题：Bootstrap table striped: How do I change the stripe background colour?。所以我可以改变它，例如：

.table-striped > tbody > tr:nth-child(2n+1) > td, 
.table-striped > tbody > tr:nth-child(2n+1) > th 
{
    background-color: red;
}

但是，我的应用程序需要为＆＃34;选定的行＆＃34;使用不同的颜色。所以我有一个名为＆＃34; selectedRow＆＃34;的CSS类。我们将其添加到所选的tr。该物业是：

.selectedRow td 
 {
    background-color: blue;
    color: black; 
}

我需要为选定的行，背景颜色优先于Bootstrap表剥离。那是...对于我添加css类tr的{{1}}我希望它们是蓝色的，而不是红色的。请注意，我不能在这里使用selectedRow（这是有原因的。）

那么我可以采用另一种方法来更改Bootstrap表条带，以便我的selectedRow css类优先吗？

Answer 1

以下是table.less：

中的代码

.table-striped {
  > tbody > tr:nth-child(odd) {
    > td,
    > th {
      background-color: @table-bg-accent;
    }
  }
}

因此您可以使用：

.table-striped > tbody > tr:nth-child(odd) > td {
   background-color: #819bbf;
  color: black;
}

JSBin

Answer 2

你必须比Bootstrap样式更具体。

例如：

.table-striped>tbody>tr.selectedRow:nth-child(odd)>td,
.table-striped>tbody>tr.selectedRow:nth-child(even)>td {
    background-color: #819bbf;
    color: black; 
}

我希望你明白这一点。

如何以不太具体的方式更改Bootstrap表条带？

2 个答案: