Wie können Sie einen „div'-Container von öffentlichen CSS-Stilen isolieren und verhindern, dass seine untergeordneten Elemente globale Stile erben?

Isolieren eines Div aus öffentlichen CSS-Stilen

Problem

Betrachten Sie den folgenden HTML-Code:

<code class="html">&lt;div id=&quot;mydiv&quot;&gt;
  &lt;img src=&quot;an image source&quot; /&gt;
  &lt;h1&gt;Hi it's test&lt;/h1&gt;
&lt;/div&gt;</code>

Anwenden des Folgenden CSS-Stylesheet:

<code class="css">img {
  width: 100px;
  height: 100px;
}
h1 {
  font-size: 26px;
  color: red;
}</code>

Es stellt sich die Frage: Wie können wir verhindern, dass das für alle <img> und <h1> Tags davon abhalten, die Elemente im #mydiv-Container zu beeinflussen?

Lösung

Um die Elemente in #mydiv von den globalen CSS-Stilen zu isolieren, können wir die Abkürzungseigenschaft „all“ und das in eingeführte Schlüsselwort „unset“ nutzen CSS-Kaskadierung und Vererbungsebene 3.

Indem wir all: initial auf #mydiv setzen, blockieren wir die Vererbung für alle Eigenschaften und setzen sie auf ihre Standardwerte zurück. Dies verhindert, dass die globalen Stile in den Container kaskadieren.

Um die Vererbung innerhalb von #mydiv zu ermöglichen, können wir all:unset für seine Nachkommen festlegen. Auf diese Weise ermöglichen wir, dass die im Container definierten Regeln ohne Beeinträchtigung durch externe Stile wirksam werden.

Hier ist der überarbeitete CSS-Code:

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

Es ist wichtig zu beachten, dass diese Technik gilt für alle möglichen CSS-Eigenschaften, einschließlich der vom Hersteller vorgegebenen Eigenschaften. Um eine umfassende Browserunterstützung sicherzustellen, wird empfohlen, auch auf Pseudoelemente abzuzielen:

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

Alternativer Ansatz

Alternativ können Sie für eine breitere Browserkompatibilität jede CSS-Eigenschaft manuell auf ihren Anfangspunkt setzen Wert auf #mydiv und auf seine Nachkommen erben, wie im folgenden Code zu sehen:

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

Browser-Unterstützung

Die All-Shorthand-Eigenschaft wird in den folgenden Browsern unterstützt:

• Chrome 37
• Firefox 27
• Safari 9.1
• Edge 79
• Opera 24

Für bis - Aktuelle Informationen zur Browser-Unterstützung finden Sie in der offiziellen Dokumentation.

Das obige ist der detaillierte Inhalt vonWie können Sie einen „div'-Container von öffentlichen CSS-Stilen isolieren und verhindern, dass seine untergeordneten Elemente globale Stile erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!