css - 在 Bootstrap 的条纹表中更改颜色......但仅限于其中一些

Question

我想自定义 Bootstrap 条纹表的颜色……但只是其中的一部分。换句话说，我不想要全局变化；我只想自定义我网站上一个特定表格中的颜色。在这两个问题之后:

How to combine class and ID in CSS selector?

Bootstrap table striped: How do I change the stripe background colour?

我尝试将我的表格和 CSS 定义为:

<table class="table-condensed table-striped" id="info_envio">

#info_envio.table-striped>tr:nth-child(odd){
   background-color:red;
}

但它不起作用。

我觉得这一定很简单。一只小手，好吗？

Answer 1

我想你错过了 tbody在选择器和 nth-of-type .

#info_envio.table-striped>tbody>tr:nth-of-type(odd){
   background-color:red;
}

旧版本(低于 v3.3.0)的 Bootstrap 可能会将背景颜色分配给单元格而不是行，因此如果上述方法不起作用，请尝试下一步。

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

来自 v3.3.0 更改日志...

#13920: Assign background-color to <tr> elements instead of <th>/<td> within the .table-striped to avoid broken backgrounds on responsive tables.