Surmonter le remplacement du CSS dans les outils de développement Chrome

Lorsque vous rencontrez des règles CSS remplacées lors de l'utilisation des outils de développement de Chrome, vous vous demandez peut-être comment identifier le règle impérative. Heureusement, Chrome propose une solution pratique.

Trouver la règle de remplacement

Dans l'inspecteur d'éléments, accédez au panneau Style calculé. Sélectionnez la propriété qui vous intéresse et développez-la. Vous trouverez ici une liste des règles applicables, avec la règle gagnante en haut.

La règle gagnante est déterminée par les facteurs suivants :

• Spécificité : Les règles ayant une spécificité plus élevée sont prioritaires.
• Ordre : Les règles ultérieures remplacent les règles précédentes.
• Importance : Les règles "!important" remplacent règles ordinaires.

Exemple

Si vous souhaitez inspecter la couleur d'arrière-plan remplacée d'un élément, développez la propriété "background-color" dans le champ Panneau Style calculé. Chrome affichera les informations suivantes :

• La règle gagnante (par exemple, "body")
• La source de la règle (par exemple, "stylesheet.css")
• Le numéro de ligne de la règle dans le fichier source

Cela vous permet d'identifier l'emplacement exact de la règle de remplacement et de résoudre facilement les conflits CSS.