Comment surmonter les problèmes de spécificité CSS dans les styles en ligne ?

Précédence CSS : surmonter la spécificité

Dans la page Web donnée, un style en ligne pour le remplissage à gauche est remplacé par une feuille de style référencée. Ce problème survient en raison des différences dans la spécificité des deux styles.

La spécification des règles en CSS est effectuée par des sélecteurs, qui dictent les éléments auxquels la règle s'applique. La spécificité d'un sélecteur détermine sa priorité, les règles de spécificité supérieure ayant priorité sur les règles inférieures.

Dans cet exemple, la feuille de style référencée contient la règle ".rightColumn {margin: 0; padding: 0; }" avec le sélecteur ".rightColumn ". Ce sélecteur correspond à n'importe quel élément de l'élément portant l'ID "rightColumn". Le problème se pose car le style de "td" dans le style en ligne s'applique à n'importe quel élément de cellule de tableau, quel que soit son élément parent.

Pour résoudre ce problème, il existe deux options :

Utilisation de la spécificité :

Augmentez la spécificité du style en ligne pour "td" en ajoutant un sélecteur de spécificité plus élevée, tel qu'une classe ou un identifiant. Par exemple :

<pre class="brush:php;toolbar:false"><style type="text/css">
td#myUnpaddedTable {
    padding-left:10px;
} 
</style>

Dans cet exemple, la spécificité du sélecteur "#myUnpaddedTable" (0101) est supérieure à celle de ".rightColumn *" (0010), ce qui rend le style en ligne plus spécifique.

Utilisation de !important :

L'ajout de "!important" au style en ligne oblige le navigateur à le donner la priorité à tout autre style. Cette approche doit être évitée car elle peut prêter à confusion dans les feuilles de style complexes.

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!