如何將 div 與 HTML 中的公開 CSS 樣式隔離？

將div 與公共CSS 樣式隔離

在HTML 中，CSS 級聯和繼承有時會影響div 中無意中的元素由公共CSS 規則設計樣式。這可能會導致意外的格式問題。為了解決這個問題，CSS 級聯和繼承等級 3 引入了 all 簡寫屬性和 unset 關鍵字。

使用all 和unset 關鍵字

防止div 內的標籤為了避免受公共樣式的影響，您可以在div 上設定all: initial ，並在其後代上設定all: unset 。這將阻止 div 上所有屬性的繼承，並允許在 div 本身內繼承。

範例

考慮以下HTML：

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

以下CSS：

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

如果不隔離， div內的圖像和標題將繼承公共樣式。要隔離它，請套用以下 CSS：

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

這將阻止任何公共樣式影響 #mydiv div 中的元素，同時允許它們繼承 div 本身中定義的樣式。

跨瀏覽器支援

大多數現代瀏覽器都支援 all 屬性。對於較舊的瀏覽器，您可以手動為所有 CSS 屬性指定初始值以獲得類似的結果。但請注意，此方法不如使用 all 屬性有效。

以上是如何將 div 與 HTML 中的公開 CSS 樣式隔離？的詳細內容。更多資訊請關注PHP中文網其他相關文章！