你能阻止 CSS 樣式繼承父元素嗎？

防止子元素繼承CSS 中的父級樣式

問題：

有沒有如何防止父元素上宣告的CSS 屬性被子元素繼承？例如，如果父元素的 font-size 為 12px，你能阻止它的子元素繼承這個樣式嗎？

答案：

不幸的是，有沒有簡單的 CSS 屬性可以讓您阻止從父元素繼承。但是，可以實施以下解決方法：

1. 手動恢復樣式變更：

   您可以透過明確設定來覆寫繼承的樣式子元素所需的樣式。例如：

   div { color: green; }
   
   form div { color: red; }
   
   form div div.content { color: green; }

2. 為標記新增多個類別：

   如果您有權限存取HTML 標記，則可以新增多個元素的類別以針對特定樣式。這允許您覆蓋繼承類別的樣式：

   form div.sub { color: red; }
   
   form div div.content { /* remains green */ }

3. 使用all: revert 屬性（實驗）：

   CSS 工作組提出了all: revert 屬性，它將元素上的所有樣式重設為其初始值。這可用於防止從父元素繼承：

   div.content {
     all: revert;
   }

   請注意，此屬性仍處於實驗階段，可能並非所有瀏覽器都支援。

以上是你能阻止 CSS 樣式繼承父元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！