我如何覆盖CSS？

我想创造我的表行的一个黄色背景。以下行代码

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

似乎取代我自己的造型。如果我删除了这些类，则该行会根据需要显示为黄色。是否有某种方法可以维持班级，但是会覆盖设置，这样我的颜色就成为重中之重？

来源

2012-02-15 Hoa

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

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

来源

2012-02-15 12:50:51 Simon

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

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

来源

2012-02-15 12:45:12 Quentin

变化这在你的CSS

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

是的，我知道这是非常脏。如果有人更好地了解这一点，请评论我的答案。我想知道更好的解决方案！

来源

2012-02-15 12:47:08

他应该不需要使用！重要的。这里的问题是选择器优先。他只需要一个具有更高值的选择器，或稍后再定义。 – reedlauber 2012-02-15 12:49:52

谢谢，我发现你的另一个答案。将该类更改为一个id，以便它比一个类更具体。像魅力一样工作，谢谢 – 2012-02-15 12:55:59

！重要的是一个糟糕的实践和弃用... – 2012-02-15 13:11:01

将类更改为一个id。

CSS：

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

HTML

<tr id="zebraHover"> 
    <td>1</td> 
    <td>User1</td> 
    <td>[email protected]</td> 
    <td><a class="btn btn-danger" href="#">Deactivate</a></td> 
</tr>

http://jsfiddle.net/xBRPg/

来源

2012-02-15 12:53:14

的问题是由设置背景颜色的使用选择具有高特异性行的规则造成的。为了适当地覆盖它们，使用例如

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

来源

2012-02-15 12:55:26

我如何覆盖CSS？

回答

相关问题