So verhindern Sie, dass sich öffentliche CSS-Stile auf Div-Inhalte auswirken: Wie funktioniert „all: initial'?

So verhindern Sie, dass sich öffentliche CSS-Stile auf Div-Inhalte auswirken

In HTML-Code werden div-Tags häufig zum Gruppieren von Elementen zu Stilzwecken verwendet. Allerdings ist es manchmal notwendig, den Inhalt innerhalb eines div-Tags vom Stil zu isolieren, der auf das öffentliche CSS-Stylesheet angewendet wird.

CSS-Vererbung und Kaskadierung

CSS-Stile werden vererbt durch untergeordnete Elemente aus ihren übergeordneten Elementen. Das bedeutet, dass, wenn sich ein Bild und ein Überschriften-Tag beide innerhalb eines div-Tags befinden, sie die auf das div-Tag angewendeten CSS-Eigenschaften erben, außer in bestimmten Fällen.

Blockieren der Vererbung mit „all: initial“. '

Um zu verhindern, dass der Inhalt innerhalb eines div-Tags durch öffentliche CSS-Stile beeinflusst wird, können Sie die CSS-Eigenschaft „all: initial“ verwenden. Diese Eigenschaft setzt alle geerbten und definierten CSS-Eigenschaften auf ihre Anfangswerte zurück.

Codebeispiel

Um den div-Inhalt im angegebenen HTML-Code zu isolieren, kann das folgende CSS verwendet werden verwendet:

<code class="css">#mydiv {
  all: initial; /* resets inheritance for all properties */
}</code>

Vererbung innerhalb des Div-Tags zulassen

Während „all: initial“ die Vererbung blockiert, ist es möglich, sie innerhalb des Div-Tags selbst zuzulassen. Dazu können Sie die Eigenschaft „all: unset“ für die Nachkommenelemente des div-Tags verwenden:

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

Browser-Unterstützung

Die Eigenschaft „all“ Die Kurzschrifteigenschaft wird in modernen Browsern, einschließlich Chrome, Firefox, Safari und Edge, weitgehend unterstützt. Für eine breitere Unterstützung können Sie die längere Version verwenden, bei der jede CSS-Eigenschaft auf ihren Anfangswert gesetzt wird:

<code class="css">#mydiv {
  /* ... (set all CSS properties to 'initial') ... */
}</code>

Fazit

Durch die Verwendung von 'all: initial ' um die Vererbung zu blockieren und 'all: unset' um sie innerhalb des div zuzulassen, ist es möglich, den Inhalt eines div-Tags aus dem öffentlichen CSS-Stylesheet zu isolieren. Diese Technik eignet sich besonders zum Erstellen eigenständiger Widgets oder Komponenten.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass sich öffentliche CSS-Stile auf Div-Inhalte auswirken: Wie funktioniert „all: initial'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!