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

196

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

Je veux savoir s'il y a quelque chose comme "Montrez-moi ce qui l'emporte" .

OBS: S'il vous plaît, ne me dirigez pas vers Firebug.

— Ramon K.
source

Les outils de développement de Chrome vous montrent également la règle primordiale

— Zoltan Toth

Réponses:

283

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

Capture d'écran de Chrome

— josh3736
source

Pour moi, l'onglet calculé était ouvert par défaut et donc non répertorié comme un onglet, il aurait dû avoir un en-tête «Calculé», sinon vous pourriez chercher longtemps.

— MrFox

La technique a un peu changé avec l'avancée de Chrome. Au lieu de `` développer la propriété d'intérêt '', cliquez sur la lunette à côté de la propriété et elle montrera quel style a repris dans l'onglet Styles.

— intotecho

@intotecho: Chrome 47 a restauré le expando dans l'onglet Calculé depuis que le changement de loupe est nul. crbug.com/496263

— josh3736

que se passe-t-il si TOUS sont annulés? Probablement à cause d'un script? Comment savoir qui l'a fait?

— darkgaze

Il est toujours là sous l'onglet "Calculé" du panneau Eléments.

— josh3736

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

Ou vous pouvez afficher les styles calculés. Ce seront les styles réellement appliqués.

— user1902091
source

crtrl + shift + c et inspectez l'élément. Trouvez ensuite le style sans ligne, dans la case en bas à droite.

le remplacement est dans la plupart des cas au sommet (et sans ligne, car ce style est le "gagnant").

— Peter Rasmussen
source

Ce n'est pas le cas lorsqu'un style est signalé comme! Important

— JCorriveau