Переопределение загрузочного CSS

Я пытаюсь изменить фоновый цвет строк, содержащих класс found в полосатой таблице начальной загрузки. Он работает для четных строк, потому что bootstrap не имеет цвета фона для них, но нечетные строки меня блокируют загрузочные файлы CSS.

Загрузочный CSS:

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

Пользовательский CSS:

 tr.found{
    background-color:#CECBCB;
}

Как бы я переопределить загрузочный CSS только для одной строки за раз (как вы можете видеть в демо, нечетные строки не переопределены)?

BOOTPLY DEMO

Ответы

Ответ 1

Напишите специальный селектор для переопределения бутстрапов

table.table.table-striped tr.found td {
    background-color:#CECBCB;
}

Демо

Кроме того, здесь важна не только специфика, убедитесь, что вы применили фон к элементу td, а не к tr, потому что bootstrap применяется к элементу td, поэтому, даже если вы применяете фон к tr не имеет смысла.

Как вы сказали, что вам нужно объяснение для селектора, который я написал, так что вот оно, мы сломаем это и поймем.

Начиная с этого

table.table.table-striped - Здесь я выбираю элемент table, имеющий классы .table AS WELL AS .table-striped

Далее с селектором tr.found мы выбираем элементы tr, имеющие class, называемые .found, и, наконец, мы выбираем вложенные элементы td.

Ответ 2

.table-striped>tbody>tr:nth-child(odd)>td,
tr.found{
    background-color:#CECBCB;
}