看看这段代码！

Question

我正在尝试更改引导表中活动行的颜色：

html：

<div class="container">
    <div class="row">
        <table class="table">
            <tr class="active">
                <td>Hello world</td>
            </tr>
        </table>
    </div>
</div>

css：

.container > .row > .table > tr .active {
    background-color:#123456;
}

这不起作用，我无法弄清楚原因。我尝试了各种组合而没有任何成功，我可能会遗漏一些明显的东西。

Answer 1

首先请注意，某些浏览器用<tr>元素包裹<tbody>，因此使用直接后代选择器>，您需要在tbody中包含.active选择器也是。

其次，<tr>类属于tr.active元素，因此它应该是td。

此外，由于Twitter Bootstrap将背景颜色应用于th和.container > .row > .table > tbody > tr.active th .container > .row > .table > tbody > tr.active td元素，您可以按如下方式覆盖该值：

<强> EXAMPLE HERE

.container > .row > .table tr.active th
.container > .row > .table tr.active td

或者干脆避免使用direct descendant (or child)选择器：

<强> EXAMPLE HERE

{{1}}

Answer 2

看看这段代码！

jsFiddle

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

.table>tbody>tr.active>td {
  background: #123456;
  color: #fff;
}

Answer 3

我认为你是次要类型的选择。也许是这样。

.container > .row > .table > tr.active {
     background-color:red;
}

Answer 4

试试这个：

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

更改Bootstrap活动表行背景颜色

4 个答案:

看看这段代码！

DEMO