覆盖引导表条带化 CSS

Posted 2023-05-08

【中文标题】覆盖引导表条带化 CSS

【英文标题】：Overriding bootstrap table-striped 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（正如您在演示中看到的那样，奇数行不会被覆盖）？

BOOTPLY DEMO

【参考方案1】：

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

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

Demo

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

---

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

从这个开始

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

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

【讨论】：

你能给我解释一下遵循 CSS 级别 (table.table.table-striped tr.found td)

@JordanD 当然，我会解释，给我一分钟

我会在允许的时候接受这个答案。再次感谢！

【参考方案2】：

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

【讨论】：

你是对的。我不理会它，因为外星人先生已经回答得比我好得多。不过想法是一样的：使用更具体的选择器来应用更改。这是一篇关于 CSS 特异性的好读物link

我更喜欢这个答案，它直接复制了条纹图案而无需添加额外的类

【参考方案3】：

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

 tr.found td
    background-color:#CECBCB;

Bootply Demo