Question

在以下示例中

我正在尝试为我的一个表格行创建黄色背景。以下代码行

<table class="table table-bordered table-striped">

似乎取代了我自己的造型。如果我删除了类，则行会根据需要显示为黄色。有没有办法维护类，但仍覆盖设置，以便我的颜色优先考虑？

Answer 1

行是黄色。只是它里面的单元格是＃f9f9f9所以你无法通过它们看到行的背景颜色。

您需要更改选择器以匹配行中的单元格，而不是行本身。您还需要增加选择器的specificity，因为已经使用的选择器比您具有的更具体。

Answer 2

这是因为CSS特异性 - table.table-striped tr比table tr更具体。更具体的规则覆盖不太具体的规则。在我看来，你应该尽可能避免!important，而是专注于让你的选择器更具体。所以在你的情况下，做到：

table.table-striped tr.zebraHover td {
    background-color: #FFFACD;
}

Answer 3

在你的css中更改此内容

tr.zebraHover td {
            background-color: #FFFACD !important;
}

是的，我知道它很脏。如果有人更了解这一点，请评论我的答案。我希望知道一个更好的解决方案！

Answer 4

将班级更改为id。

CSS：

#zebraHover td{
            background-color: #FFFACD;
        }

HTML

<tr id="zebraHover">
     <td>1</td>
     <td>User1</td>
     <td>user1@gmail.com</td>
     <td><a class="btn btn-danger" href="#">Deactivate</a></td>
 </tr>

http://jsfiddle.net/xBRPg/

Answer 5

问题是由使用具有高特异性的选择器为行设置交替背景颜色的规则引起的。要适当地覆盖它们，请使用例如

    tr.zebraHover,
    .table-striped tbody tr:nth-child(2n+1).zebraHover td
    {
        background-color: #FFFACD;
    }

我该如何覆盖CSS？

5 个答案: