"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Pourquoi mes styles en ligne sont-ils remplacés par ma feuille de style ?

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

Publié le 2024-11-04
Parcourir:762

Why Are My Inline Styles Being Overridden by My Stylesheet?

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 sur la base des critères suivants :

  1. Les déclarations de style en ligne contribuent pour 1 point à la spécificité (a = 1).
  2. Chaque ID du 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 sa plus grande importance. 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).
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3