Remplacer le style CSS

Question

Je définis certaines classes CSS qui, lorsqu'elles sont appliquées à une table, génèrent un style par défaut.

Par exemple, permet de dire que je crée une classe appelée myTable:

.myTable { 
    th { 
    background-color: #000; 
    } 

    td { 
    background-color: #555; 
    } 
} 

donc une table avec la classe .myTable obtiendrait ces couleurs sur th et td par défaut.

Je pensais que si une autre classe devait être assignée à un td individuel, elle remplacerait le style par défaut.

Donc, si j'avais une autre classe:

.red { background-color: red; } 

Et une table:

<table class=myTable> 
    <th class="red">Content</th> 
    <td>Hello!</td> 
</table> 

Je pensais que la classe « rouge » provoquerait l'arrière-plan de l'en-tête d'être rouge, plutôt que noir. Ce n'est pas le cas. Pour que cette classe pour remplacer l'original, il doit être défini dans la classe myTable comme ceci:

td.red { background-color: red; } 

Suis-je manque quelque chose ici, est-il une autre façon de le faire pour que je puisse avoir des styles par défaut sont plus facilement annulés?

Answer 1

L'idée est que le style à utiliser dépend de deux choses: à quel point le sélecteur est spécifique, la position de la règle (la dernière règle gagne). Exemple:

p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

Les paragraphes seront de couleur bleue. Un autre exemple:

body p { 
    background-color: red; 
} 

p { 
    background-color: blue; 
} 

Les paragraphes seront rouges puisque le "corps p" est plus spécifique.

Editer: Essayez aussi d'éviter d'utiliser! Important. Il est pris en charge mais un effet secondaire est que vous ne pouvez jamais le remplacer (jamais). Ne l'utilisez donc que dans les cas extrêmes où vous n'avez aucun moyen de savoir comment construire des règles spécifiques (par exemple: print.css générique).

Answer 2

Il existe un moyen standard de donner une certaine priorité au style.

td.red { background-color: red !important; } 

Answer 3

C'est une question de la spécificité des sélecteurs CSS utilisés (à savoir comment exactement un sélecteur correspond à aucun élément HTML donné). Plus un sélecteur est spécifique, plus la priorité de ses styles est élevée.

Pour une explication détaillée de la spécificité du sélecteur CSS, consultez cette page: CSS Specificity: Things You Should Know.

Answer 4

Il y a deux manières, vous pouvez utiliser !important à la fin de la déclaration en tant que telle:

.red { 
    background-color: red !important; 
} 

En outre, la déclaration plus précise, plus répandue, il sera. Donc, tout ce qui se trouve dans table.myTable td.red {} aura plus de prévalence sur tout ce qui est en td.red{}.

Answer 5

La règle !important remplace une propriété particulière dans css.Par conséquent, en cas de substitution d'une propriété, vous devez toujours l'utiliser avec la valeur.

Plus de détails sur: https://css-tricks.com/when-using-important-is-the-right-choice/