Warum sind einige CSS-Eigenschaften in Chrome DevTools durchgestrichen?

Durchgestrichene CSS-Eigenschaften in Chrome DevTools: Den Grund aufdecken

Beim Untersuchen von HTML-Elementen in den Devtools von Chrome können Sie auf durchgestrichene Elemente stoßen CSS-Eigenschaften im Bereich „Stile“. Diese durchgestrichenen Eigenschaften weisen auf ein bestimmtes Verhalten hin, das Aufschluss über den Stil des Elements gibt.

Bedeutung durchgestrichener Eigenschaften

Durchgestrichene Eigenschaften geben den zugrunde liegenden Stil an wurde ursprünglich angewendet, aber später durch einen spezifischeren Selektor, eine lokalere Regel oder eine spätere Eigenschaft innerhalb derselben Regel überschrieben. Dieses Verhalten tritt auf, weil CSS-Regeln in der Reihenfolge ihrer Spezifität und Priorität angewendet werden.

Sonderfälle

Zusätzlich zu den oben genannten Gründen können durchgestrichene Eigenschaften auch darauf hinweisen folgende Sonderfälle:

• Auskommentierte Stile: Stile, die in einer Übereinstimmungsregel vorhanden sind, aber auskommentiert sind.
• Manuell deaktivierte Stile:Stile, die manuell deaktiviert wurden, indem sie in den Chrome-Entwicklertools deaktiviert wurden.
• Syntaxfehler: Stile, die Syntaxfehler enthalten, angezeigt durch ein Fehlersymbol neben dem durchgestrichenen Text .

Beispiel

Betrachten Sie das folgende Beispiel:

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

Untersuchen Sie in Chrome Devtools die Datei „my-div "-Element würde „Hintergrundfarbe: Weiß“ durchgestrichen anzeigen. Dies weist darauf hin, dass die anfängliche weiße Hintergrundfarbe durch die nachfolgende blaue Hintergrundfarbe überschrieben wurde, die für Divs mit der ID „my-div“ angegeben wurde.

Das obige ist der detaillierte Inhalt vonWarum sind einige CSS-Eigenschaften in Chrome DevTools durchgestrichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!