Snažím sa zmeniť farbu aktívnych riadkov v tabuľke bootstrap:

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 nefunguje a nemôžem prísť na to, prečo som skúsil rôzne kombinácie bez úspechu, možno by som tu chýbal niečo zrejmé.

odpovede:

4 pre odpoveď č. 1

Najskôr si všimnite, že niektoré prehliadače zabalené <tr>s a <tbody> element, a teda pomocou priameho výberu potomkov > budete musieť zahrnúť tbody v rámci svojho voliča.

Po druhé, .active trieda patrí k <tr> prvok, preto by to malo byť tr.active miesto.

Okrem toho, odkedy Twitter Bootstrap používa farbu pozadia na td a th prvky, môžete túto hodnotu prepísať nasledovne:

PRÍKLAD TU

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

Alebo sa jednoducho vyhýbajte používaniu priamy potomok (alebo dieťa) volič:

PRÍKLAD TU

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

---

0 pre odpoveď č. 2

Myslím, že ste mali menší výber tried. Možno takto.

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

---

0 pre odpoveď č. 3

Skúste to:

.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 pre odpoveď č. 4

Pozrite sa na tento kód!

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

---