覆盖引导表条带化的CSS

前端之家收集整理的这篇文章主要介绍了覆盖引导表条带化的CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在条带引导表中更改包含我找到的类的行的背景颜色.它适用于偶数行,因为引导程序没有它们的背景颜色,但奇数行我被引导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;
}

一次只能覆盖一个行的引导CSS的(如您在演示中可以看到的奇数行不被覆盖)?

BOOTPLY DEMO

解决方法

编写特定的选择器以覆盖引导的选择器
table.table.table-striped tr.found td {
    background-color:#CECBCB;
}

Demo

此外,不仅特殊性在这里重要,请确保将背景应用于td元素而不是tr,因为引导应用于td元素,因此即使将背景应用于tr也不会有意义.

正如你所说的,你想要为我写的选择器的解释,所以在这里,让我们断开和理解..

从此开始

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

进一步使用选择器,tr.found我们选择具有一个名为.found的类的tr元素,最后我们选择嵌套的td元素.

猜你在找的CSS相关文章