Gibt es eine Möglichkeit herauszufinden, woher eine CSS-Regel kommt?
Entschuldigung, wenn das eine doppelte Frage ist, obwohl ich nach einer Lösung gesucht und keine gefunden habe.
Ich habe eine ASP-Website geerbt und musste die Seiten aktualisieren, um Formulare in Tabellen in die Seitenleiste zu verschieben.
Es hat auf allen Seiten, bis auf eine Seite, gut funktioniert, die hartnäckig nicht akzeptiert, meine CSS und nimmt Werte von wer weiß wo.
Ich habe das Debuggen in Firefox / Chrome und sogar geschriebene Regeln im Kopf der Seite versucht, aber ohne Erfolg. Gibt es ein Werkzeug, um diese Art von Dingen zu identifizieren? Ich bin nicht mit Css lumpen, aber das ist verblüfft mich. Ich möchte nicht Javascript verwenden, um dies zu beheben, da ich es als ein grundlegendes Problem sehe.
Die URL lautet: leads2trade_solar
*** jetzt beantwortet - die Debug-Tools erzählen die CSS-Geschichte, aber nicht schlecht kodierten HTML-Flag! Danke an alle für die Hilfe.
3 Antworten
Sie können den Web Inspector in Chrome verwenden.
Klicken Sie mit der rechten Maustaste auf das fehlerhafte Element und wählen Sie inspect element.
Sie sollten am Ende mit dem Webinspektor-Fenster mit zwei Abschnitten enden: links ist der HTML-Knotenbaum und rechts sind Stile und Eigenschaften des ausgewählten Knotens. Ein fehlgeschlagenes Element sollte bereits ausgewählt sein.
Als nächstes müssen Sie die Registerkarte "Computed Style" erweitern und nach einem fehlerhaften Stil suchen.
Wenn gefunden, sehen Sie ein kleines Dreieck links neben der Stildefinition - es ist anklickbar. Beim Klicken sollte die Liste der Selektoren erweitert werden, die diesen Stil für dieses Element betreffen. Sie werden sehen, dass die URL für jedes dieser Elemente css ist. Bingo.
Wie von austin und Waterlink hervorgehoben, können die Berechnete Stile (oder Berechnet in FF) die aktuell verwendeten Stile und deren Ursprung anzeigen.
Die Registerkarte Stile ist jedoch ebenfalls sehr nützlich. Wenn Sie mit der rechten Maustaste auf ein Element klicken, wird auf der Registerkarte Stile die vollständige Liste aller aktiven Stile und überschriebenen Stile angezeigt, die sich auf das inspizierte Element beziehen. (Zeigt sie so, wie sie im CSS geschrieben wurden. Nicht was tatsächlich gerendert wird.) Auf diese Weise können Sie feststellen, welche Stile in welcher Reihenfolge überschrieben wurden. Ein Stil in Ihrem CSS könnte aus einem Inline-Stil, einem benutzerdefinierten Stil, einer später definierten CSS-Datei oder einer CSS-Regel höherer Wichtigkeit oder sogar einem Nicht-CSS-Attribut wie Breiten- / Höhenattributen direkt auf einem HTML-Element überschrieben werden
Die Formatierung zeigt den Status für einen Stil:
- normaler Text = aktiv
- durchgestrichen = inaktiv, da ein anderer Stil es überschrieben hat
- ausgegraut = Bezeichner nicht angewendet. (Wenn Sie den Style eines
<p>-Elements überprüfen und der css-Bezeichnerp, spanist, dann wäre derspan-Bezeichner ausgegraut)
Beispiel:
In diesem Bild ist die Eigenschaft color von #post a inaktiv. Es wurde von der Eigenschaft color in #cashieCatalog überschrieben.
Auf der Registerkarte HTML von Firebug sollten Sie rechts ein Panel mit den Tabs Style , Computed , Layout und DOM sehen. Wählen Sie Computed . Dies zeigt Ihnen den "aktuellen" Stil, der auf die Seite angewendet wird.
Wenn Sie einen Regelknoten erweitern, sollten Sie auf der rechten Seite einen Link sehen, der Ihnen anzeigt, aus welchem Stylesheet er stammt, zusammen mit Stylesheet-Regeln, die überschrieben werden.
Tags und Links css