如何將'div”容器與公共 CSS 樣式隔離並防止其子級繼承全域樣式？

Linda Hamilton

發布： 2024-10-26 04:19:03

原創

393 人瀏覽過

How can you isolate a `div` container from public CSS styles and prevent its children from inheriting global styles?

將Div 與公用CSS 樣式隔離

問題

考慮以下HTML 程式碼：

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

登入後複製

考慮以下HTML 程式碼：

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

登入後複製

應用以下內容樣式表：

問題出現了：我們如何防止為所有如何將'div”容器與公共 CSS 樣式隔離並防止其子級繼承全域樣式？

定義的樣式？和

標籤會影響 #mydiv 容器中的元素嗎？

解決方案

要將 #mydiv 中的元素與全域 CSS 樣式隔離，我們可以利用 all 簡寫屬性和中引入的 unset 關鍵字CSS 級聯和繼承等級 3。

透過在 #mydiv 上設定 all:initial，我們封鎖所有屬性的繼承並將其重設為預設值。這可以防止全域樣式級聯到容器中。

為了允許在 #mydiv 內繼承，我們可以在其後代上設定 all: unset。透過這樣做，我們可以使容器內定義的規則生效，而不受外部樣式的干擾。

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

登入後複製

這是修改後的CSS程式碼：

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

登入後複製

需要注意的是，這種技術適用於所有可能的 CSS 屬性，包括供應商前綴的屬性。為了確保廣泛的瀏覽器支持，建議也以偽元素為目標：

替代方法

<code class="css">#mydiv {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}

#mydiv::before,
#mydiv::after,
#mydiv *,
#mydiv *::before,
#mydiv *::after {
  align-content: initial;
  align-items: initial;
  align-self: initial;
  ...

  color: inherit;
  ...
}</code>

登入後複製