CSS 更改 Bootstrap 活动表行背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25601450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Bootstrap active table rows background color
提问by vanna
I am trying to change the color of the active rows in a bootstrap table :
我正在尝试更改引导表中活动行的颜色：
html :
html :
<div class="container">
<div class="row">
<table class="table">
<tr class="active">
<td>Hello world</td>
</tr>
</table>
</div>
</div>
css :
css :
.container > .row > .table > tr .active {
background-color:#123456;
}
This doesn't work and I cannot figure out why. I have tried various combinations without any success, I might be missing something obvious here.
这不起作用，我不知道为什么。我尝试了各种组合但没有成功，我可能在这里遗漏了一些明显的东西。
回答by Hashem Qolami
First of all note that some browsers wrap <tr>s by a <tbody>element, hence by using direct descendant selector >you'll need to include tbodywithin your selector as well.
首先请注意，某些浏览器将<tr>s包裹在一个<tbody>元素中，因此通过使用直接后代选择器，>您还需要将其包含tbody在选择器中。
Second, the .activeclass belongs to the <tr>element, hence it should be tr.activeinstead.
其次，.active类属于<tr>元素，因此它应该是tr.active。
In addition, since Twitter Bootstrap applies the background color to tdand thelements, you could override that value as follows:
此外，由于 Twitter Bootstrap 将背景颜色应用于td和th元素，您可以按如下方式覆盖该值：
.container > .row > .table > tbody > tr.active th
.container > .row > .table > tbody > tr.active td
Or simply avoid using direct descendant (or child)selector:
或者干脆避免使用直接后代（或子）选择器：
.container > .row > .table tr.active th
.container > .row > .table tr.active td
回答by eirenaios
Look this code!
看看这个代码！
html
html
<div class="container">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
</div>
css
css
.table>tbody>tr.active>td {
background: #123456;
color: #fff;
}
回答by Ecko Santoso
I think you were minor type of classes selection. Maybe like this.
我认为你是次要类型的课程选择。也许像这样。
.container > .row > .table > tr.active {
background-color:red;
}
回答by Suganth G
Try this:
尝试这个：
.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th {
background-color:red;
}
