覆盖引导表条纹CSS [英] Overriding bootstrap table-striped CSS

问题描述

我试图更改包含我的发现类在条带化引导表中的行的背景颜色。它适用于偶数行，因为引导程序没有背景颜色，但奇数行我被引导程序CSS阻止。

I am trying to change the background-color of rows that contain my found class in a striped bootstrap table. It works for even rows because bootstrap doesn't have a background color for them, but odd rows I am blocked by 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中看到，奇数行不会被覆盖）？

How would I override bootstrap's CSS for only a single row at a time (as you can see in demo, odd rows are not overridden)?

BOOTPLY DEMO

推荐答案

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

Write specific selector to override the bootstrap ones

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

演示

此外，不仅特殊性在这里，确保您应用 td 元素，而不是 tr ，因为bootstrap应用于 td 如果应用 tr 的背景将没有意义。

Also, not only specificity matters here, make sure you apply the background to the td element and not the tr because bootstrap is applying to the td element so even if you apply the background to tr won't make sense.

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

As you said that you wanted the explanation for the selector I wrote, so here it goes, let us break that and understand..

从这开始

table.table.table-striped - 在这里选择一个表元素有 .table AS WELL AS .table-striped

table.table.table-striped - Over here am selecting a table element having classes .table AS WELL AS .table-striped

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

Going further with the selector, tr.found we select the tr elements having a class called .found and lastly, we select the nested td elements.

这篇关于覆盖引导表条纹CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！