更改引導活動錶行的背景顏色

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

中的所有筆記，有些瀏覽器由<tbody>元素包裹<tr> S，因此通過直接的後代選擇>你需要包括你的選擇中tbody以及第一位。

其次，.active類屬於<tr>元素，因此它應該是tr.active。

此外，由於Twitter的引導應用背景顏色td和th元素，可以按如下方式覆蓋該值：

EXAMPLE HERE

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

或者乾脆避免使用direct descendant (or child)選擇：

EXAMPLE HERE

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

Answer 2

我認爲你是次要類型的選擇。 也許這樣。

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

Answer 3

試試這個：

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

DEMO

Answer 4

看看這個代碼！

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