Pourquoi mes styles en ligne sont-ils remplacés par ma feuille de style ?

Précédence CSS : pourquoi les styles en ligne sont remplacés

En CSS, les styles sont appliqués aux éléments en fonction de la priorité de leurs règles. Lorsque plusieurs règles ciblent le même élément, celle ayant la priorité la plus élevée prendra effet.

Dans l'exemple fourni, vous disposez d'un style en ligne qui définit padding-left : 10px pour les éléments td dans un tableau avec la colonne de droite. IDENTIFIANT. Cependant, un style d'une feuille de style référencée définit la marge et le remplissage sur 0 pour tous les éléments de la classe .rightColumn. Le problème est que les styles de la feuille de style référencée ont une priorité plus élevée, ce qui entraîne le remplacement des styles en ligne.

Calcul de la spécificité

La priorité CSS est déterminée par la spécificité de règles. La spécificité est calculée en fonction des critères suivants :

1. Les déclarations de style en ligne contribuent pour 1 point à la spécificité (a = 1).
2. Chaque ID dans le sélecteur contribue pour 10 points (b = n ).
3. Chaque classe ou pseudo-classe du sélecteur apporte 1 point (c = n).
4. Chaque élément ou pseudo-élément du sélecteur apporte 1 point (d = n).

Par exemple, une règle avec le sélecteur .rightColumn* a une spécificité de 0010 (a = 0, b = 0, c = 1, d = 0), tandis qu'une règle avec le sélecteur td a une spécificité de 0001 (a = 0, b = 0, c = 0, d = 1). Puisque 0010 est supérieur à 0001, la règle de la feuille de style référencée a une priorité plus élevée.

Résoudre le problème

Pour résoudre ce problème et appliquer les styles en ligne, vous devez deux options :

1. Utiliser !important : Vous pouvez ajouter !important au style en ligne pour forcer son importance supérieure. Cependant, cette approche peut être difficile à maintenir et doit être évitée si possible.
2. Augmenter la spécificité des règles : Vous pouvez ajouter un sélecteur plus spécifique au style en ligne pour augmenter sa spécificité. Par exemple, vous pouvez ajouter un nom de classe aux cellules du tableau et les styliser à l'aide d'un sélecteur tel que .rightColumn .myUnpaddedTable. De cette façon, la spécificité du style en ligne devient 0011, ce qui est supérieur à la spécificité de la règle de la feuille de style référencée (0010).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!