/ / Zmiana koloru tła wierszy aktywnego panelu Bootstrap - css, twitter-bootstrap

Zmiana koloru tła wiersza aktywnego Bootstrap - css, twitter-bootstrap

Próbuję zmienić kolor aktywnych wierszy w tabeli ładowania początkowego:

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

To nie działa i nie mogę zrozumieć dlaczego, próbowałem różnych kombinacji bez żadnego sukcesu, może brakowało mi czegoś oczywistego tutaj.

Odpowiedzi:

4 dla odpowiedzi № 1

Przede wszystkim zwróć uwagę, że niektóre przeglądarki zawijają <tr>s przez a <tbody> element, stąd za pomocą selektora bezpośredniego potomka > będziesz musiał dołączyć tbody w twoim selektorze.

Po drugie, .active klasa należy do <tr> element, a więc powinno być tr.active zamiast.

Ponadto, ponieważ Bootstrap na Twitterze stosuje kolor tła td i th elementy, możesz zastąpić tę wartość w następujący sposób:

PRZYKŁAD TUTAJ

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

Lub po prostu unikaj używania bezpośredni potomek (lub dziecko) selektor:

PRZYKŁAD TUTAJ

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

0 dla odpowiedzi nr 2

Myślę, że byłeś niewielkim typem selekcji klas. Może tak.

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

0 dla odpowiedzi № 3

Spróbuj tego:

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

0 dla odpowiedzi nr 4

Zobacz ten kod!

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