So isolieren Sie ein Div vom globalen CSS-Einfluss: Verwenden von „all: initial' und „all: unset'.

So isolieren Sie ein Div vor globalem CSS-Einfluss

Im bereitgestellten HTML-Code haben wir ein div-Element mit der ID „mydiv“, das in einem Körper verschachtelt ist. Wenn wir CSS-Stile auf Elemente wie Bilder und Überschriften anwenden, möchten wir möglicherweise die Elemente in „mydiv“ von diesen öffentlichen Stilen ausschließen.

CSS-Kaskadierung und Vererbungskontrolle

CSS-Kaskadierung und Vererbungsebene 3 führte die Abkürzungseigenschaft all und das Schlüsselwort unset ein, wodurch wir die Vererbung einschränken und bestimmte Elemente isolieren können. Indem wir all: initial für ein Element festlegen, blockieren wir effektiv jegliche Vererbung und setzen alle Eigenschaften auf ihre Anfangswerte zurück. Dies ist so, als würde man ganz von vorn beginnen und alle Stile ignorieren, die von übergeordneten Elementen geerbt wurden.

Isolieren von „mydiv“ mit all: initial

Um zu verhindern, dass geerbte Stile Elemente in „mydiv“ beeinflussen, Wir wenden all: initial auf das Div und all: unset auf seine Nachkommen an:

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

#mydiv * {
  all: unset; /* Allows inheritance within #mydiv */
}</code>

Umfassendes Zurücksetzen der Eigenschaften

Alternativ, um sicherzustellen Um die Kompatibilität zwischen verschiedenen Browsern zu gewährleisten, können wir alle bekannten CSS-Eigenschaften (einschließlich Versionen mit Herstellerpräfix) manuell auf ihre Anfangswerte setzen:

<code class="css">#mydiv {
  /*
   * Using initial for all properties
   * to completely block inheritance
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  background: initial;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  /*
   * Using inherit for normally heritable properties,
   * and initial for the others, similar to unset
   */
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...
  color: inherit;
  ...
}</code>

Durch die Nutzung dieser Techniken können wir erfolgreich verhindern, dass Elemente in „mydiv“ erben und werden von globalen CSS-Stilen beeinflusst, wodurch sie in ihrer eigenen gekapselten Stilumgebung isoliert werden.

Das obige ist der detaillierte Inhalt vonSo isolieren Sie ein Div vom globalen CSS-Einfluss: Verwenden von „all: initial' und „all: unset'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!