Les outils de développement Safari / Chrome déboguent les remplacements CSS

Question

Les outils de développement Safari / Chrome indiquent qu'une règle CSS est remplacée par quelque chose d'autre en la frappant, comme indiqué dans l'image.

Parfois, je me trouve dans une situation où je ne peux pas comprendre à partir des fichiers CSS ce qui fait que cette règle est ignorée.Mais Safari lui-même doit sûrement savoir quand il le frappe.

Existe-t-il un moyen de savoir ce qui remplace une telle règle?

Answer 1

Regardez celui qui n'est pas rayé, plus haut dans la liste.

Vous pouvez également afficher les styles calculés .Ce seront les styles appliqués définitifs.

Answer 2

Lorsque vous inspectez un élément, vous pouvez afficher la «boîte».Juste en bas de cela, vous avez un "filtre" qui devrait vous montrer toutes les propriétés appliquées à votre élément.

Si vous cliquez sur une propriété, cela vous donnera le fichier et le numéro de ligne.

Answer 3

Les outils de développement listeront toutes les règles d'un élément.Il suffit de lire toutes les règles CSS applicables et de rechercher une règle non barrée du même nom.

Answer 4

Allez dans Éléments >> Calculé et vous obtiendrez la feuille de style qui définit la règle que vous recherchez.

Answer 5

Accédez à l'onglet Calculé des outils de développement Chrome.Trouvez la propriété recherchée et développez les détails.