Pourquoi mon style en ligne est-il remplacé par une feuille de style ?

Spécificité CSS : gouverner la hiérarchie des styles

Dans le monde du développement Web, comprendre la priorité CSS est crucial pour gérer efficacement les styles conflictuels. Considérez le scénario suivant : une page Web contient à la fois un style en ligne et une feuille de style référencée, mais la feuille de style semble remplacer le style en ligne.

Ce problème de priorité se pose en raison du concept de spécificité CSS. CSS attribue une valeur numérique à chaque déclaration de style en fonction de la longueur et de la spécificité de son sélecteur. Plus la valeur est élevée, plus la spécificité est grande et plus elle est susceptible de remplacer d'autres styles.

Dans l'exemple donné, le CSS fourni est le suivant :

<style>
  td {
    padding-left:10px;
  } 
</style>

et

.rightColumn * {margin: 0; padding: 0;}

La déclaration de style en ligne pour td a une spécificité de 0001 (zéro attribut d'ID, zéro sélecteur de classe ou d'attribut et un nom d'élément). La déclaration de feuille de style pour .rightColumn * a une spécificité de 0010 (zéro attribut d'ID, un sélecteur de classe, zéro attribut ou sélecteur de pseudo-classe et zéro nom d'élément).

Selon les règles de spécificité CSS, cette dernière déclaration a une spécificité plus élevée et est donc prioritaire, même s'il apparaît plus tôt dans l'ordre des sources.

Pour surmonter ce problème, il existe deux options :

1. Utiliser !important : Ajoutez !important à la déclaration de style td pour la rendre plus importante que la règle de la feuille de style. Cependant, utiliser !important peut être problématique s'il existe de nombreuses règles contradictoires.
2. Augmentez la spécificité du style en ligne : Augmentez la spécificité du sélecteur td en y ajoutant un identifiant ou une classe. . Cela donnera au style en ligne une spécificité plus élevée que la règle de la feuille de style, lui permettant de la remplacer.

Par exemple :

<style>
  .important-td {
    padding-left:10px;
  } 
</style>

ou

<style>
  #specific-td {
    padding-left:10px;
  } 
</style>

Comprendre la spécificité CSS est essentiel pour une conception Web efficace et garantir que les styles appliqués à vos éléments sont tels que prévu. En tirant parti du concept de spécificité, les développeurs peuvent prioriser les styles et créer l'apparence visuelle souhaitée pour leurs pages Web.

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!