Comment puis-je remplacer une règle CSS conflictuelle provenant d'une feuille de style externe lors de l'utilisation d'un style en ligne ?

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

Dans ce scénario, le style en ligne padding-left : 10px appliqué aux cellules du tableau dans l'ID de la colonne droite est remplacé par une règle conflictuelle à partir d'une feuille de style externe. La feuille de style référencée contient une règle qui définit la marge et le remplissage sur 0 pour tous les éléments de la classe rightColumn.

Le concept de spécificité CSS

Pour déterminer quelle règle CSS est prioritaire, un concept appelé spécificité entre en jeu. La spécificité est une mesure de la spécificité du sélecteur d'une règle CSS. Plus un sélecteur est spécifique, plus sa spécificité est élevée.

Calcul de la spécificité

CSS 2.1 définit les règles suivantes pour le calcul de la spécificité :

• Compte 1 si la déclaration est à partir d'un attribut de style (style en ligne) et 0 s'il ne provient pas d'un attribut de style.
• Comptez le nombre d'attributs ID dans le sélecteur.
• Comptez le nombre d'autres attributs et pseudo-classes dans le sélecteur.
• Comptez le nombre de noms d'éléments et de pseudo-éléments dans le sélecteur.

Ces quatre valeurs sont concaténées sous la forme a-b-c-d, où a est la valeur du première règle, b de la deuxième règle, et ainsi de suite. Plus la valeur numérique est élevée, plus la spécificité est élevée.

Application de la spécificité au cas donné

Dans ce cas, le style en ligne a une spécificité de 0001 (aucun attribut d'ID, aucun autre attribut ou pseudo-classes, un nom d'élément). La règle en conflit de la feuille de style externe a une spécificité de 0010 (pas d'attributs d'ID, un autre attribut ou pseudo-classe, pas de noms d'éléments).

Comme 0010 est supérieur à 0001, la règle de la feuille de style externe prend priorité et remplace le style en ligne.

Deux solutions pour surmonter les problèmes de spécificité

Pour remplacer la règle conflictuelle, il existe deux options principales :

1. Utiliser !important : Ajouter !important au style en ligne le rendrait plus important et remplacerait la règle conflictuelle. Cependant, cela doit être utilisé avec parcimonie car cela peut introduire de la confusion.
2. Utilisez un sélecteur de spécificité plus élevée : Modifiez le style en ligne en ajoutant une classe ou un identifiant aux cellules du tableau en question. Cela créera une nouvelle règle avec une spécificité plus élevée que la règle conflictuelle de la feuille de style externe.

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!