覆盖bootstrap表条带CSS

Question

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

Bootstrap 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;
}

我如何一次只覆盖一行的bootstrap CSS（正如你在demo中看到的那样，奇数行没有被覆盖）？

BOOTPLY DEMO

Answer 1

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

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

Demo

此外，不仅特殊问题在这里，请确保将背景应用于td元素而不是tr，因为bootstrap正在应用于td元素，因此即使您申请tr的背景是没有意义的。

---

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

从这个开始

table.table.table-striped - 在这里选择一个table元素，其中包含.table类.table-striped

继续使用选择器tr.found，我们选择tr个class元素称为.found，最后，我们选择嵌套的td元素。

Answer 2

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

Answer 3

除了Alien先生的解决方案之外，我发现以下内容在Bootstrap 4中有效，而没有显式覆盖表格样式。

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

Bootply Demo