如何防止公共CSS樣式影響Div內容：「all:initial」如何運作？

如何防止公共CSS 樣式影響Div 內容

在HTML 程式碼中，div 標籤通常用於對元素進行分組以實現樣式設定。但是，有時需要將 div 標籤內的內容與套用於公共 CSS 樣式表的樣式隔離。

CSS 繼承和級聯

CSS 樣式是繼承的透過子元素從其父元素。這意味著，如果圖片和標題標籤都在 div 標籤內，它們將繼承套用於 div 標籤的 CSS 屬性，則特殊情況除外。

使用'all: initial 阻止繼承'

為了防止div 標籤內的內容受到公共CSS 樣式的影響，您可以使用CSS 屬性“all:initial” 。此屬性將所有繼承和定義的 CSS 屬性重設為其初始值。

程式碼範例

要隔離給定HTML 程式碼中的div 內容，可以使用以下CSS使用：

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

允許在Div 標籤內繼承

雖然'all:initial' 會阻止繼承，但可以在div 標籤本身內允許繼承。為此，您可以在div 標籤的後代元素上使用「all: unset」屬性：

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

瀏覽器支援

「all」現代瀏覽器廣泛支援簡寫屬性，包括Chrome、Firefox、Safari 和Edge。為了獲得更廣泛的支持，您可以使用更長的版本，其中涉及將每個CSS 屬性設定為其初始值：

<code class="css">#mydiv {
  /* ... (set all CSS properties to 'initial') ... */
}</code>

結論

透過使用'all: initial ' 阻止繼承，'all: unset' 允許它在div 中，可以將div 標籤的內容與公共CSS 樣式表隔離。這種技術對於創建獨立的小部件或組件特別有用。

以上是如何防止公共CSS樣式影響Div內容：「all:initial」如何運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！