Wie überschreibe ich Inline-Stile „!important' in CSS?

Inline-!important-Stile überschreiben

In CSS wird das !important-Flag verwendet, um anzugeben, dass eine Stileigenschaft Vorrang vor allen anderen haben soll Erklärungen. Es kann jedoch vorkommen, dass Sie einen Inline-Stil mit !important aus einem Stylesheet überschreiben müssen.

Berücksichtigen Sie das folgende HTML-Element:

<code class="html"><div style="display: none !important;"></div></code>

Wenn Sie dieses Element sichtbar machen möchten , Sie können nicht einfach eine andere !important-Regel in Ihrem Stylesheet verwenden, da diese den Inline-Stil nicht überschreibt.

Lösung

Um einen Inline-Stil mit !important zu überschreiben, Sie müssen das Flag !important für einen spezifischeren Selektor verwenden. In diesem Fall können Sie einen Klassenselektor wie diesen verwenden:

<code class="css">div.visible {
  display: block !important;
}</code>

Diese Regel zielt auf jedes div-Element mit der sichtbaren Klasse ab und überschreibt den Inline-Stil display: none, wodurch das Element sichtbar wird.

<code class="html"><div style="display: none !important;" class="visible"></div></code>

Beachten Sie, dass diese Technik nur funktioniert, wenn der Selektor, den Sie in Ihrem Stylesheet verwenden, spezifischer ist als der Inline-Selektor. Darüber hinaus empfiehlt es sich im Allgemeinen, die übermäßige Verwendung von !important zu vermeiden, da dies die Wartung Ihres CSS-Codes erschweren kann.

Das obige ist der detaillierte Inhalt vonWie überschreibe ich Inline-Stile „!important' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!