Ist es möglich, die "berechneten" Stile für :: after und :: before pseudo-Elemente zu überprüfen?
Chrome zeigt mir die Definitionen ::after und ::before (und geerbte Definitionen usw.) im Bereich Übereinstimmende CSS-Regeln an, wenn ich ein Element inspiziere. Im Bereich Berechnete Stile werden jedoch nur die berechneten Stile für das Stammelement angezeigt.
Ich habe eine ganze CSS-Klassenhierarchie für die Pseudo-Elemente mit einigen übernommenen und einigen überschriebenen Eigenschaften usw. und würde gerne wissen, ob es irgendeinen Weg gibt, den Satz von Stilen zu sehen, die tatsächlich angewendet wurden Bereich zeigt für das Wurzelelement)
Wenn jemand etwas Licht darauf werfen kann, wird das sehr hilfreich sein.
Bearbeiten - 13. Februar 2014
In den letzten Versionen von Chrome ist dieses Feature tatsächlich eingebaut. Vielleicht hat dieser kleine Thread etwas damit zu tun? : -)
2 Antworten
window.getComputedStyle( element[, pseudoElt] )
pseudoEltOptionalEine Zeichenfolge, die das passende Pseudoelement angibt. Muss für reguläre Elemente weggelassen werden (oder null). Pseudoklassen können wie ": focus" angegeben werden.
Ich missverstehe möglicherweise, was Sie erreichen möchten, aber hier ist ein bisschen JavaScript zum Spielen. Ich hoffe es ist nützlich.
Er durchläuft jedes Element im Dokument und versucht, content seiner :before s und :after s zu erhalten.
Wenn es einen gefunden hat, gibt es die Details zum console aus.
Einfach, aber nachweisbar.
Ja, obwohl es nicht so offensichtlich ist. Wenn Sie Firebug verwenden, müssen Sie sicherstellen, dass auf der Registerkarte "Stil" die Option "Nur angewendete Stile anzeigen" ausgewählt ist. Wie Sie auf dem Screenshot sehen können, sollten Sie in der Lage sein, die Pseudoelemente auszuwählen und ihr berechnetes Styling (oder das angewendete Styling) anzuzeigen, das eventuelle Überschreibungen usw. berücksichtigt.
Tags und Links css google-chrome pseudo-element