Wie kann ich ein Div von öffentlichen CSS-Stilen in HTML isolieren?

Isolieren eines Div von öffentlichen CSS-Stilen

In HTML können sich CSS-Kaskadierung und -Vererbung manchmal auf Elemente innerhalb eines Div auswirken, die dafür nicht vorgesehen sind nach den öffentlichen CSS-Regeln gestaltet werden. Dies kann zu unerwarteten Formatierungsproblemen führen. Um dieses Problem zu beheben, wurden in CSS Cascading and Inheritance Level 3 die Abkürzungseigenschaft „all“ und das Schlüsselwort „unset“ eingeführt.

Verwendung der Schlüsselwörter „all“ und „unset“

Um Tags innerhalb eines div zu verhindern Um von öffentlichen Stilen betroffen zu sein, können Sie „all:initial“ für das div und „all:unset“ für seine Nachkommen festlegen. Dadurch wird die Vererbung für alle Eigenschaften im Div blockiert und die Vererbung innerhalb des Div selbst ermöglicht.

Beispiel

Bedenken Sie den folgenden HTML-Code:

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

Und das folgende CSS:

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

Ohne das Div zu isolieren, würden das Bild und die Überschrift innerhalb des Div die öffentlichen Stile erben. Um es zu isolieren, wenden Sie das folgende CSS an:

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

Dadurch wird verhindert, dass sich alle öffentlichen Stile auf die Elemente im #mydiv-Div auswirken, während sie gleichzeitig die im Div selbst definierten Stile erben können.

Browserübergreifende Unterstützung

Die all-Eigenschaft wird in den meisten modernen Browsern unterstützt. Bei älteren Browsern können Sie „initial“ für alle CSS-Eigenschaften manuell angeben, um ähnliche Ergebnisse zu erzielen. Beachten Sie jedoch, dass diese Methode weniger effektiv ist als die Verwendung der Eigenschaft all.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div von öffentlichen CSS-Stilen in HTML isolieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!