How to Isolate a Div from Global CSS Influence: Using `all: initial` and `all: unset`

How to Quarantine a Div from Global CSS Influence

In the provided HTML code, we have a div element with ID "mydiv" nested within a body. When applying CSS styles to elements such as images and headings, we may wish to exclude the elements within "mydiv" from these public styles.

CSS Cascading and Inheritance Control

CSS Cascading and Inheritance Level 3 introduced the all shorthand property and the unset keyword, empowering us to restrict inheritance and isolate specific elements. By setting all: initial on an element, we effectively block all inheritance and reset all properties to their initial values. This is akin to starting with a clean slate, disregarding any styles inherited from parent elements.

Isolating "mydiv" with all: initial

To prevent inherited styles from affecting elements within "mydiv," we apply all: initial to the div and all: unset to its descendants:

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

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

Comprehensive Property Reset

Alternatively, to ensure compatibility across various browsers, we can manually set all known CSS properties (including vendor-prefixed versions) to their initial values:

<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>

By leveraging these techniques, we can successfully prevent elements within "mydiv" from inheriting and being affected by global CSS styles, thereby isolating them within their own encapsulated styling environment.

The above is the detailed content of How to Isolate a Div from Global CSS Influence: Using `all: initial` and `all: unset`. For more information, please follow other related articles on the PHP Chinese website!