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

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

應用以下內容樣式表：

問題出現了：我們如何防止為所有 定義的樣式？和

標籤會影響 #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>

或者，為了更廣泛的瀏覽器兼容性，您可以手動將每個CSS 屬性設定為其初始值#mydiv 上的值並繼承其後代，如下列程式碼所示：

瀏覽器支援

• 以下瀏覽器支援all 簡寫屬性：
• Chrome 37
• Firefox 27
• Safari 9.1
• Edge 79

>適用-最新瀏覽器支援訊息，請參考官方文件。

以上是如何將'div”容器與公共 CSS 樣式隔離並防止其子級繼承全域樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！