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.
la source
2
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
la 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
1
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
3
@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
7

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
la source
2

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
la source
4
Ce n'est pas le cas lorsqu'un style est signalé comme! Important
JCorriveau