css personnalisé étant remplacée par bootstrap css

Je suis avec Bootstrap 3 et j'ai un tableau présentant des données. dans cette table, j'ai appliqué un peu de javascript pour la mise en forme conditionnelle, dans le cas où une condition est remplie, j'ai mis de l'élément de classe "rouge"

.red {
background-color:red;
color:white;
}

les éléments HTML est comme suit:

<td class="red">0</td>

J'ai maintenant un conflit sur les lignes de la couleur du texte s'applique, mais la couleur de fond est remplacé par le texte suivant css de bootstrap.

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

comment puis-je résoudre ce conflit et de s'assurer que la classe rouge prend presedence?

  • Utilisez un sélecteur avec une spécificité plus élevée.
  • Quoi que vous fassiez, s'il vous plaît ne pas utiliser !important!
InformationsquelleAutor mmilan | 2013-11-04