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.

— Ramon K.
quelle

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

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

@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

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

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

Es ist nicht der Fall, wenn ein Stil als! Wichtig markiert wird

— JCorriveau