web-dev-qa-db-fra.com

les css personnalisés sont remplacés par les css bootstrap

J'utilise Bootstrap 3 et j'ai un tableau montrant des données. Dans ce tableau, j'ai appliqué du javascript pour la mise en forme conditionnelle. Si une condition est remplie, je règle la classe de l'élément sur "rouge"

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

les éléments HTML sont les suivants:

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

J'ai maintenant un conflit sur les lignes impaires, la couleur du texte s'applique, mais la couleur d'arrière-plan est remplacée par le CSS suivant tiré 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 assurer que la classe rouge assume la présidence?

csstwitter-bootstraptwitter-bootstrap-3
21
mmilan

Spécificité

Votre problème concerne très probablement la spécificité. Chris Coyier a un excellent article sur la spécificité CSS . Je vous suggère également de consulter ce calculateur pratique de spécificité .

En utilisant cette calculatrice, nous pouvons voir que .table-striped > tbody > tr:nth-child(odd) > td a une spécificité de 23. En tant que tel, pour ignorer cela, toute nouvelle règle doit avoir une spécificité égale ou supérieure à 23. .red est à 10, de sorte que pour le couper.

Dans ce cas, cela devrait être aussi simple que de faire correspondre la spécificité existante, puis d’y ajouter votre classe. .table-striped > tbody > tr:nth-child(odd) > td.red nous donne une spécificité de 33. Comme 33 est supérieur à 23, votre règle devrait maintenant fonctionner.

Voir un exemple de travail ici: http://bootply.com/91756

!important

En général, vous ne devriez jamais utiliser !important à moins que vous ne souhaitiez jamais que cette règle soit remplacée. !important est fondamentalement l'option nucléaire. Je suis assez confiant pour dire que si vous comprenez la spécificité, vous ne devriez jamais avoir besoin de !important pour faire fonctionner correctement une règle personnalisée dans un cadre tel que Bootstrap.

Mettre à jour

Après un peu de réflexion, la règle que je donne ici est probablement un peu trop spécifique. Que se passe-t-il si vous souhaitez mettre en évidence une cellule sur une table qui n'a pas été supprimée? Pour rendre votre règle un peu plus globale tout en ayant suffisamment de spécificité pour fonctionner dans des tableaux dépouillés, je choisirais .table > tbody > tr > td.red. Cela a la même spécificité que la suppression de Bootstrap, mais fonctionnera également sur les tables qui ne sont pas supprimées. Exemple mis à jour ici: http://bootply.com/91760

48
Sean Ryan

Premièrement, lisez la réponse de Sean Ryan - elle est très bonne et informative, mais je devais modifier suffisamment sa réponse avant d’implémenter dans mon code pour que je souhaite une réponse distincte qui pourrait aider la personne suivante. 

J'avais presque la même question que le PO, mais je devais aussi pouvoir mettre en évidence la rangée. Voici comment j'ai amélioré (?) La réponse de Sean Ryan et l'ai transformée en ma dernière implémentation, ce qui vous permet d'ajouter une classe à la plupart des éléments aléatoires, y compris un "tr" ou un "td"

Voir ceci sur bootply.com

CSS 

    /* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css

FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756

I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/

.highlight {
    background-color: lightyellow;
}


/* supersede bootstrap at the row level by being annoyingly specific 
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
    background-color: pink;
}

/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
    background-color:lightgreen;
}

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>2hi</td>
            <td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
            <td>hi</td>
        </tr>
        <tr class="highlight">
            <td>3hi</td>
          <td>This whole row should be highlighted.</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>4hi</td>
            <td>hi</td>
            <td>hi</td>
        </tr><tr>
            <td>5hi</td>
            <td class="highlight">Just a specific cell to be highlighted</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>
4
JJ Rohrer

Utilisation 

.table-striped > tbody > tr:nth-child(odd) > td.red {
    background-color:red;
    color:white;
}

pour créer un sélecteur plus spécifique, ou le mot clé! important (comme l'a montré Andrew)

Alternativement, et probablement mieux, vous pouvez créer une configuration d'amorçage personnalisée, qui n'inclut pas le style de tableau (Désélectionnez Tables dans CSS commun). 

2
Stefan

Vous devez appliquer !important après le style de classe. parce que nous utilisons le sélecteur, c'est .table-striped > tbody > tr:nth-child(odd) > td, qui est plus spécifique que la règle de classe et aura la priorité. Donc, vous devez remplacer ceci avec !important.

Mais il y a deux façons de résoudre ce problème:

  1. Utilisez !important pour rendre une règle plus "importante". J'éviterais de faire cela parce que c'est déroutant lorsque vous avez beaucoup de règles réparties sur plusieurs fichiers.

  2. Utilisez un sélecteur de spécification supérieure pour le td que vous souhaitez modifier. Vous pouvez ajouter un identifiant, ce qui vous permettra de remplacer la règle à partir du fichier CSS lié.

Lire css Precedence

2
Ishan Jain

Vous pouvez ajouter !important après chaque style de la classe .red. Ajouter! Important donnera au CSS plus de poids, ce qui vous permettra de remplacer les autres styles.

Votre css ressemblerait à ceci:

.red {
    background-color: red !important;
    color: white !important;
}
2
Andrew

Vous pouvez appliquer une valeur de !important après la valeur que vous souhaitez prévaloir.

1
user2578173

Ne serait-ce pas une solution qui au lieu d'appliquer une classe, ajoute css à l'élément?

0
Matthew Trow