Wie finde ich die spezifische CSS-Regel, die einen Stil in Chrome DevTools überschreibt?

Enthüllung der überschreibenden CSS-Regeln in Chrome Developer Tools

Bei der Überprüfung von Webelementen in Chrome Developer Tools werden häufig überschriebene Stile sichtbar. Dennoch kann es etwas entmutigend sein, die für solche Außerkraftsetzungen verantwortliche Regel zu finden. Aber keine Angst, denn Chrome bietet einen cleveren Mechanismus zur Lösung dieses Problems.

Enthüllung der übergeordneten Stilregeln

Um die übergeordneten Regeln zu ermitteln, tauchen Sie ein in die Berechneter Stil Panel des Elementinspektors. Erweitern Sie die spezifische Stileigenschaft, an der Sie interessiert sind. Voilà! Ihnen wird eine Liste aller anwendbaren CSS-Regeln angezeigt, in der der siegreiche Gewinner aufgeführt ist, der für die beobachtete Stilüberschreibung verantwortlich ist.

Als Beispiel untersuchen wir ein Element mit einer überschriebenen Eigenschaft „Schriftgröße“. Das Erweitern dieser Eigenschaft im Bedienfeld „Berechneter Stil“ würde etwa Folgendes ergeben:

font-size: 16px;
   - overridden by <link href="style2.css" rel="stylesheet"> line 10
   - origin: <inline style>

Dies sagt uns, dass der ursprüngliche Wert „font-size“ inline festgelegt wurde, die Überschreibung jedoch ab „style2.css“ erfolgt Zeile 10. So einfach ist das!

Das obige ist der detaillierte Inhalt vonWie finde ich die spezifische CSS-Regel, die einen Stil in Chrome DevTools überschreibt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!