template - Anulando CSS bootstrap table-striped

bootstrap templates

Question

Estoy tratando de cambiar el color de fondo de las filas que contienen mi clase found en una tabla bootstrap rayada. Funciona para las filas iguales porque bootstrap no tiene un color de fondo para ellas, pero las filas impares están bloqueadas por CSS de bootstraps.

CSS Bootstrap:

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

CSS personalizado:

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

¿Cómo anularía el CSS de bootstrap para solo una fila a la vez (como se puede ver en la demostración, las filas impares no se anulan)?

DEMO DE BOOTPLY

Answer 1

Además de la solución del Sr. Alien, encontré que lo siguiente funciona en Bootstrap 4 sin anular explícitamente el estilo de la tabla.

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

Demostración de Bootply

Answer 2

Escribe un selector específico para anular los bootstrap

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

Demo

Además, no solo importa la especificidad aquí, asegúrese de aplicar el fondo al elemento td y no al tr porque bootstrap se está aplicando al elemento td , por lo que incluso si aplica el fondo a tr no tendrá sentido.

Como dijiste que querías la explicación para el selector que escribí, así que aquí va, rompamos eso y entendamos ...

Comenzando con esto

table.table.table-striped - Aquí selecciono un elemento de table que tiene clases .table .table-striped AS .table-striped

Yendo más allá con el selector, tr.found seleccionamos los elementos tr que tienen una class llamada .found y, por último, seleccionamos los elementos td anidados.

Answer 3

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