Wie verhindert man die Vererbung von CSS-Stilen innerhalb einer bestimmten Div?

Isolieren eines Div aus öffentlichen CSS-Stilen

Problem:

Im bereitgestellten HTML-Code werden die CSS-Stile angewendet img- und h1-Elemente wirken sich auch auf die Elemente innerhalb des #mydiv-Div aus. Wie kann diese Vererbung verhindert werden?

Lösung:

Verwendung der Kurzschrifteigenschaft all:

CSS Level 3 führt das ein All-Kurzform-Eigenschaft, mit der Sie alle Eigenschaften eines Elements zurücksetzen können. Wenn Sie „all: initial“ für das #mydiv-Div festlegen, werden alle von seinen Vorgängern geerbten Stile blockiert.

Um Stile innerhalb des #mydiv-Divs zu ermöglichen, wenden Sie „all: unset“ auf seine Nachkommen an. Dies ermöglicht die Vererbung innerhalb des Div und verhindert gleichzeitig, dass externes CSS es beeinflusst.

<code class="css">#mydiv {
  all: initial;
}
#mydiv * {
  all: unset;
}</code>

Manuelles Festlegen einzelner Eigenschaften:

Für eine breitere Browserunterstützung legen Sie alle bekannten manuell fest CSS-Eigenschaften werden für das #mydiv-Div initialisiert und für seine Nachkommen ggf. geerbt oder initialisiert. Dadurch wird das Verhalten der Eigenschaft „all“ simuliert.

Zusätzliche Überlegungen:

• Erwägen Sie die Verwendung einer Klasse für das div anstelle einer ID, um die Spezifität besser steuern zu können.
• Blockieren Sie Stile für potenzielle Nachkommen von Pseudoelementen, um eine vollständige Isolierung sicherzustellen.
• Überwachen Sie die Browserunterstützung für die All-Shorthand-Eigenschaft, da sie noch nicht allgemein unterstützt wird.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Vererbung von CSS-Stilen innerhalb einer bestimmten Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!