Outils de développement Chrome: comment savoir ce qui remplace une règle CSS?

Eh bien, c’est assez simple. Si les outils de développement de Chrome montrent qu’un style est remplacé, comment voir quelle règle CSS la remplace?

Je veux savoir s’il y a quelque chose comme “Montrez-moi ce qui prime sur ceci” .

OBS: S’il vous plaît, ne me pointez pas vers Firebug.

Utilisez le panneau Style calculé de l’inspecteur d’élément. Développez la propriété qui vous intéresse pour voir la liste des règles applicables et celle qui a été gagnée.

Capture d'écran Chrome

Vous pouvez simplement regarder ceux avec le même nom qui ne sont pas rayés, rappelez-vous que la liste est importante.

Ou vous pouvez voir les styles calculés. Ils seront les styles réellement appliqués.

crtrl + shift + c et inspecte l’élément. Trouvez ensuite le style sans ligne au travers, dans la case située dans le coin inférieur droit.

le remplacement est dans la plupart des cas en haut (et sans ligne, car ce style est le “gagnant”).