首頁 > web前端 > css教學 > 如何將 Div 與全域 CSS 影響隔離:使用'all:initial”和'all:unset”

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

DDD
發布: 2024-10-26 05:48:31
原創
848 人瀏覽過

How to Isolate a Div from Global CSS Influence: Using `all: initial` and `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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板