Chrome Developer Tools: Wie finde ich heraus, was eine CSS-Regel überschreibt?

196

Nun, das ist ziemlich einfach. Wenn mir die Entwicklertools von Chrome zeigen, dass ein Stil überschrieben wird, wie kann ich feststellen, welche CSS-Regel ihn überschreibt?

Ich möchte wissen, ob es etwas wie "Zeig mir, was dies außer Kraft setzt" gibt .

OBS: Bitte zeigen Sie mich nicht auf Firebug.

css google-chrome developer-tools inspector Ramon K.
quelle
2
Die Entwicklertools von Chrome zeigen Ihnen auch die übergeordnete Regel
Zoltan Toth

Antworten:

283

Verwenden Sie das Bedienfeld Berechneter Stil des Elementinspektors. Erweitern Sie die Eigenschaft von Interesse, um die Liste der anwendbaren Regeln anzuzeigen und welche gewonnen haben.

Chrome-Screenshot

josh3736
quelle
Für mich war die berechnete Registerkarte standardmäßig geöffnet und daher nicht als Registerkarte aufgeführt. Sie sollte die Überschrift "Berechnet" enthalten, da Sie sonst möglicherweise lange suchen.
MrFox
1
Die Technik hat sich mit dem Fortschritt von Chrome ein wenig geändert. Anstelle von "Erweitern Sie die gewünschte Eigenschaft" klicken Sie auf das Spionageglas neben der Eigenschaft und es wird angezeigt, welcher Stil auf der Registerkarte "Stile" zurückgewonnen wurde.
Intecho
3
@intotecho: Chrome 47 hat die Erweiterung auf der Registerkarte "Berechnet" wiederhergestellt, seit der Lupenwechsel gesaugt wurde. crbug.com/496263
josh3736
Was ist, wenn ALLE von ihnen storniert werden? Wahrscheinlich aufgrund eines Skripts? Wie finden Sie heraus, wer es getan hat?
Darkgaze
Es befindet sich immer noch als Registerkarte "Berechnet" im Elementbedienfeld.
Josh3736
7

Sie können sich einfach die gleichnamigen ansehen, die nicht durchgestrichen sind. Denken Sie daran, dass die Auflistung von Bedeutung ist.

Oder Sie können die berechneten Stile anzeigen. Sie werden die tatsächlich angewendeten Stile sein.

user1902091
quelle
2

Strg + Umschalt + C und inspiziere das Element. Suchen Sie dann den Stil ohne Linie im Feld in der unteren rechten Ecke.

Der Override befindet sich in den meisten Fällen oben (und ohne Linie, da dieser Stil der "Gewinner" ist).

Peter Rasmussen
quelle
4
Es ist nicht der Fall, wenn ein Stil als! Wichtig markiert wird
JCorriveau