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;
}

Bootstrap的较旧版本（小于v3.3.0）可能会将背景颜色分配给单元格而不是行，因此如果上述方法无效，请尝试下一步。

#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：在background-color中将<tr>分配给<th>/<td>个元素而不是.table-striped，以避免在响应式表格中出现破碎背景。

Answer 2

确保使用相同的选择器引导程序。

对于当前版本，它将是：

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

关键区别是：nth-of-type（奇数）而非：nth-child（odd）

请参阅此Example fiddle

Answer 3

.table-striped>tbody>tr:nth-child(odd)>td,  
.table-striped>tbody>tr:nth-child(odd)>th {    
    background-color: #f2f2f2; //Choose your own color here  
}

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

3 个答案: