覆盖引导表条带化 CSS答案

【问题标题】：Overriding bootstrap table-striped CSS覆盖引导表条带化 CSS
【发布时间】：2014-09-22 12:06:19
【问题描述】：

我正在尝试更改条纹引导表中包含我的found 类的行的背景颜色。它适用于偶数行，因为引导程序没有它们的背景颜色，但是我被引导程序 CSS 阻止了奇数行。

引导 CSS：

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

自定义 CSS：

 tr.found{
    background-color:#CECBCB;
}

我如何一次只覆盖单行的引导程序 CSS（正如您在演示中看到的那样，奇数行不会被覆盖）？

【问题讨论】：

【解决方案1】：

编写特定的选择器以覆盖引导程序

table.table.table-striped tr.found td {
    background-color:#CECBCB;
}

此外，这里不仅特殊性很重要，请确保将背景应用于td 元素而不是tr，因为引导程序应用于td 元素，因此即使您将背景应用于tr没有意义。

正如你所说，你想要我写的选择器的解释，所以就这样吧，让我们打破它并理解..

从这个开始

table.table.table-striped - 在这里我选择了一个 table 元素，其类具有 .table 以及 .table-striped

进一步使用选择器tr.found，我们选择tr 元素，其中class 称为.found，最后，我们选择嵌套的td 元素。

【讨论】：

【解决方案2】：

.table-striped>tbody>tr:nth-child(odd)>td,
tr.found{
    background-color:#CECBCB;
}

【讨论】：

【解决方案3】：

除了Mr. Alien的解决方案，我发现以下在Bootstrap 4中有效，没有显式覆盖表格样式。

 tr.found td{
    background-color:#CECBCB;
}

【讨论】：