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

【问题标题】：How can I change Bootstrap table-striped in a less specific way?如何以不太具体的方式更改 Bootstrap 表条带化？
【发布时间】：2014-08-10 00:31:34
【问题描述】：

我想更改 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;
}

但是，我的应用程序需要为“选定行”使用不同的颜色。所以我有一个名为“selectedRow”的 CSS 类，我们将它添加到被选中的tr。属性是：

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

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

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

【问题讨论】：

您是要在每行单击时选择（更改背景颜色）多行，还是只为预定义的行提供背景颜色？
这样的？ JSFiddle Demo

标签： html css twitter-bootstrap

【解决方案1】：

您必须比 Bootstrap 样式更具体。

例如这样：

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

希望你能明白。

【讨论】：

谢谢！这正是我想要的。效果很好。

【解决方案2】：

这是来自 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

【讨论】：

嗨。也许我不清楚。如果我按照您的建议做，我确实会更改 Bootstrap table.striped，但是我将无法使用我的“selectedRow”类更改背景颜色，因为优先级将与引导程序一起使用。而且我不能使用!important。谢谢
@MarianoMartinezPeck 请查看我对您问题的评论，我认为我们对您的问题略有误解。