web-dev-qa-db-fra.com

Remplacement du code CSS de démarrage par bandes d'amorçage

J'essaie de changer la couleur d'arrière-plan des lignes contenant ma classe found dans une table d'amorçage par bandes. Cela fonctionne pour les lignes paires parce que bootstrap n'a pas de couleur d'arrière-plan, mais les lignes impaires me bloquent par bootstraps CSS.

Bootstrap CSS:

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

CSS personnalisé:

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

Comment pourrais-je remplacer le CSS de bootstrap pour une seule ligne à la fois (comme vous pouvez le constater en démonstration, les lignes impaires ne sont pas remplacées)? 

DÉMO DE BOOTPLY

csstwitter-bootstraptwitter-bootstrap-3
16
Jordan.J.D

Écrire un sélecteur spécifique pour remplacer les bootstrap

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

Démo

De plus, non seulement la spécificité est importante ici, assurez-vous d'appliquer l'arrière-plan à l'élément td et non à tr car bootstrap s'applique à l'élément td; ainsi, même si vous appliquez l'arrière-plan à tr, cela n'a aucun sens.

Comme vous avez dit que vous vouliez l'explication du sélecteur que j'ai écrit, alors voilà, cassons-le et comprenons ..

Partir de ça

table.table.table-striped - Ici, je sélectionne un élément table dont les classes sont .table AS WELL AS .table-striped

Pour aller plus loin avec le sélecteur, tr.found, nous sélectionnons les éléments tr ayant une class appelée .found et, enfin, nous sélectionnons les éléments imbriqués td.

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

En plus de la solution de M. Alien, j’ai constaté que Bootstrap 4 fonctionne comme suit sans modifier explicitement le style de tableau.

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

Démo Bootply

0
Branstar