Wie kann ich Inline-Stile in CSS ohne JavaScript oder jQuery überschreiben?

Die Fallstricke von Inline-Stilen mit CSS überwinden

Inline-Stile sind zwar in HTML-Elementen praktisch, können jedoch beim Versuch, sie damit zu überschreiben, eine Herausforderung darstellen CSS. Es gibt jedoch eine Lösung, mit der Sie die Kontrolle über Inline-Stile ausüben können, ohne auf JavaScript oder jQuery zurückgreifen zu müssen.

Die Bedeutung von „!important“

Um das zu überschreiben Um in Ihrem Beispiel Inline-Stilattribute zu verwenden, müssen Sie das Schlüsselwort „!important“ in Ihrer CSS-Regel verwenden. Konkret fügen Sie Ihrem Dokument den folgenden CSS-Code hinzu:

div {
   color: blue !important;
}

Die „!important“-Deklaration gibt an, dass die CSS-Regel eine höhere Priorität haben sollte als der Inline-Stil. Dadurch wird sichergestellt, dass Ihr CSS den Inline-Stil überschreibt, egal was passiert.

Beispiel:

Hier ist eine angepasste Version Ihres Beispiels mit der notwendigen Ergänzung:

<div>
<pre class="brush:php;toolbar:false">div {
    color: blue !important;
}

Nach dem Hinzufügen des Schlüsselworts „!important“ wird der Inline-Stil für die Textfarbe vom CSS überschrieben Regel. Infolgedessen wird der Text in Blau angezeigt, obwohl der Inline-Stil Rot vorgibt.