Question

CSS样式CSS专家需要一些帮助！使用bootstrap在其中他们在bootstrap.css中定义了以下内容：

.table > tbody > tr.active > td{ 
   background-color:#f5f5f5;}

当用户点击它时，我试图突出显示表格中的一行 - 很简单，

我的html结构完全遵循，当我单击该行时，我将活动类插入到html中，但它没有突出显示，并且样式未应用...

<div class="container">
<div class="row">
<div ng-class=".....">
<div id="firstTable" class="group-table-split-body">
<table class="table-bordered table-condensed table-hover col-md-12">
  <thead>
  <tbody>
    <tr ng-repeat="item in items"
        ng-mouseenter="..."
        ng-mouseleave="..."
        ng-click="onRowClick(item)">
       <td class="col-md-12">{{item.name}}.....
       </td>
     </tr>
    </tbody>
   </table>
   .......................

但是，如果我只使用随机测试样式类来尝试它，就像：

.anything
 {background-color:#f5f5f5;}

所以，如果我尝试。什么，它会突出......

我使用的是Firefox ......任何想法？

Answer 1

您需要做的是：首先确保在bootstrap.min.css之后加载自己的css文件（这样你的规则有更高的优先级）之后，您可以通过复制完全相同的规则并更改其属性来轻松覆盖该引导样式。例如在你的CSS中添加：

.table > tbody > tr.active > td{ 
   background-color:red;}

你会发现不同之处。另一种方法是创建更具体的规则来覆盖引导规则，例如，我假设您的基本元素在这里使用类＆＃34; table＆＃34;实际上是表，所以你可以这样做：

table.table > tbody > tr.active > td{ 
   background-color:blue;}

解决此问题的最简单，最快速的方法是使用重要规则覆盖该属性。但这是迄今为止最糟糕的解决方案，你应尽量避免重要（后来会产生问题）。但是，如果似乎没有任何效果，你可以这样做：

.active {
   background-color: red !important;
}

Answer 2

您忘记了表格中的课程表：）

Answer 3

.table > tbody > tr.active > td{ 
   background-color:#f5f5f5;}

班级"table"在哪里？

做到这一点

table > tbody > tr.active > td{ 
   background-color:#f5f5f5;}

Bootstrap CSS嵌套样式类不适用

3 个答案: