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
!
Vous devez vous connecter pour publier un commentaire.
Spécificité
Votre problème est plus susceptible au sujet de la spécificité. Chris Coyier a un excellent article sur CSS spécificité. Je voudrais aussi vous suggère de consulter cette pratique la spécificité de la calculatrice.
À l'aide de cette calculatrice, on peut voir que
.table-striped > tbody > tr:nth-child(odd) > td
a une spécificité de 23. En tant que tel, pour ignorer que, de toute nouvelle règle doit avoir une spécificité de quelque chose d'égal ou supérieur à 23..red
est à 10, ce qui ne va pas le couper.Dans ce cas, il devrait être aussi simple que de correspondance de l'existant spécificité, et puis l'ajout de votre classe.
.table-striped > tbody > tr:nth-child(odd) > td.red
nous donne une spécificité de 33. 33 est supérieure à 23, à la règle devrait maintenant fonctionner.Voir un exemple ici: http://bootply.com/91756
!important
En général, vous ne devez jamais utiliser
!important
à moins que vous ne voulez jamais que la règle d'être redéfinie.!important
est fondamentalement l'option nucléaire. Je suis moyennement confiant en affirmant que si vous comprenez la spécificité, vous ne devriez jamais!important
de faire une règle personnalisée fonctionner correctement dans un framework comme Bootstrap.Mise à jour
Après un peu de réflexion, j'ai pour règle de fournir, ici, est sans doute un peu trop spécifique. Qu'advient-il si vous voulez higlight une cellule sur une table qui n'est pas dépouillé? Pour faire de votre règle un peu plus globale, tout en ayant encore suffisamment de spécificité de travailler en dépouillé les tables, je voudrais aller avec
.table > tbody > tr > td.red
. Cela a la même spécificité que le Bootstrap de décapage, mais aussi travailler sur les tables qui ne sont pas zebra dépouillé. Mise à jour de l'exemple est ici: http://bootply.com/91760Tout d'abord, lire Sean Ryan réponse - il est très bon et instructif, mais j'ai dû ajuster sa réponse assez avant de mettre en œuvre dans mon code que je voulais avoir une distincte réponse qui pourraient aider la personne à côté de vous.
J'ai eu presque la même question que l'OP, mais aussi nécessaire pour être en mesure de mettre en évidence la ligne, aussi. Ci-dessous comment j'ai amélioré(?) Sean Ryan réponse et l'a transformé en mon final de mise en œuvre, qui permet d'ajouter une classe à n'importe quel élément au hasard, y compris à un "tr" ou un "td"
Voir cela sur bootply.com
CSS
HTML
Vous pouvez ajouter
!important
après chaque style dans le.red
classe. L'ajout de !important fondamentalement donnera le CSS plus de poids qui vous permet de l'emporter sur d'autres styles.Votre css ressemblerait à:
!important
.!important
fonctionne, mais si vous essayez d'ajouter des styles à des éléments aléatoires alors ma réponse peut ne pas s'appliquer à vous, parce que ce n'est pas ce à la question d'origine était de demander.Utilisation
pour créer plus spécifiques sélecteur ou le !mot-clé important (comme indiqué par Andrew)
Alternitvaly, et probablement le meilleur, vous pouvez créer un fichier d'amorce de configuration, qui n'inclut pas de table de style (Décochez les Tables en Commun CSS)
Vous avez besoin d'appliquer
!important
après la classe de style. parce que nous utilisons le sélecteur est.table-striped > tbody > tr:nth-child(odd) > td
, qui est plus spécifique que la règle de classe et auront la priorité. Si vous avez besoin de remplacer cette avec!important
.Mais il y a deux façons de résoudre ce problème:
Utilisation
!important
de faire une règle plus "important". Je voudrais éviter cela, car il est source de confusion lorsque vous avez beaucoup de règles étalé sur plusieurs fichiers.Utiliser une plus grande spécificité sélecteur pour la td, vous souhaitez modifier. Vous pouvez ajouter un id et cela vous permettra de remplacer la règle à partir du fichier CSS lié.
Lire css Priorité
Vous pouvez appliquer une valeur de
!important
après la valeur que vous souhaitez emporter.Ne serait-il pas une solution qui, au lieu d'appliquer une classe, d'ajouter des css de l'élément?