如何將 Div 與全域 CSS 影響隔離：使用“all:initial”和“all:unset”

如何隔離 Div 免受全域 CSS 影響

在提供的 HTML 程式碼中，我們有一個 ID 為「mydiv」的 div 元素嵌套在正文中。當 CSS 樣式套用至圖片和標題等元素時，我們可能會想要從這些公開樣式中排除「mydiv」內的元素。

CSS 級聯和繼承控制

CSS 級聯和繼承等級3 引入了all 簡寫屬性和unset 關鍵字，使我們能夠限制繼承並隔離特定元素。透過在元素上設定 all:initial，我們可以有效地阻止所有繼承並將所有屬性重設為其初始值。這類似於從頭開始，忽略從父元素繼承的任何樣式。

使用all:initial 隔離「mydiv」

為了防止繼承的樣式影響「mydiv」中的元素，我們將all: initial 套用於div，並將all: unset 應用於其後代：

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

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

全面屬性重置

或者，以確保為了兼容各種瀏覽器，我們可以手動將所有已知的CSS 屬性（包括供應商前綴的版本）設定為其初始值：

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

利用這些技術，我們可以成功防止「mydiv」中的元素繼承並受到全域CSS 樣式的影響，從而將它們隔離在自己封裝的樣式環境中。

以上是如何將 Div 與全域 CSS 影響隔離：使用“all:initial”和“all:unset”的詳細內容。更多資訊請關注PHP中文網其他相關文章！