Wie kann ich Inline-Stile in HTML mit externem CSS überschreiben?

Inline-Stile mit externem CSS überschreiben

Wenn Sie mit HTML-Markup arbeiten, das Inline-Stile enthält, kann es vorkommen, dass Sie diese überschreiben müssen Stile mit externem CSS. Allerdings funktioniert die Anwendung regulärer CSS-Regeln möglicherweise nicht immer wie beabsichtigt.

Um Inline-Stile effektiv zu überschreiben, können Sie das Schlüsselwort !important in Ihren CSS-Regeln verwenden. Dieses Schlüsselwort fügt der Regel eine höhere Priorität hinzu, sodass sie auch dann wirksam wird, wenn Inline-Stile vorhanden sind.

Bedenken Sie beispielsweise das folgende HTML-Markup:

<div>
<p>Wenn Sie es versuchen So überschreiben Sie den Inline-Stil des div-Elements mithilfe der CSS-Regel:</p>
<pre class="brush:php;toolbar:false">div {
    color: blue;
}

Der Inline-Stil wird nicht überschrieben. Um sicherzustellen, dass der Inline-Stil überschrieben wird, verwenden Sie das Schlüsselwort !important:

div {
    color: blue !important;
}

Indem Sie !important zur Regel hinzufügen, geben Sie ihr einen höheren Vorrang vor dem Inline-Stil. Infolgedessen wird der Text im div-Element jetzt in Blau gerendert, obwohl der Inline-Stil die Farbe explizit auf Rot setzt.