覆盖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中看到的那样,奇数行没有被覆盖)？

Answer 1

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

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

此外,不仅特殊问题在这里,请确保您将背景应用于td元素而不是tr因为引导程序正在应用于td元素,因此即使您应用背景tr也没有意义.

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

从这开始

table.table.table-striped- 在这里选择一个table具有.tableAS WELL AS 类的元素.table-striped

进一步使用选择器,tr.found我们选择tr具有class被调用的元素.found,最后,我们选择嵌套td元素.

Answer 2

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