변경 부트 스트랩 활성 테이블 행의 배경 색상

Question

내가 부트 스트랩 테이블에서 활성 행의 색상을 변경하려고 : 이것은 아무튼

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

:

HTML :

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

CSS 왜 일을하는지 모르겠다. 나는 어떤 성공도없이 다양한 조합을 시도했다, 나는 여기에서 명백한 무언가를 놓치고 있을지도 모른다.

Answer 1

.

둘째, .active 클래스는 <tr> 요소에 속하므로 대신 tr.active이되어야합니다. 또한

, 트위터 부트 스트랩이 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

나는 당신이 클래스 선택의 사소한 유형이라고 생각합니다. 아마도 이런 것 같습니다. 먼저 일부 브라우저 따라서 당신은뿐만 아니라 당신의 선택 내 tbody을 포함해야합니다 > 직계 후손 선택기를 사용함으로써, <tbody> 요소에 의해 <tr>의 랩하는 모든 노트의

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