CSS中如何防止子元素繼承？

防止 CSS 中的子元素繼承

在 CSS 領域，繼承在根據父元素定義子元素的樣式方面發揮著至關重要的作用。但是，在某些情況下，您可能想要覆寫此繼承並獨立自訂子元素的樣式。

繼承問題

考慮以下HTML 結構：

<div>

使用此CSS：

form div {font-size: 12px; font-weight: bold;}

通常，文字區塊「段落內容」和段落內容」和「跨度內容」將從其父表單繼承字體大小和粗細。

防止繼承

手動樣式恢復：

覆蓋繼承的一種方法是手動恢復子元素上的樣式變更：

div {color: green;}

form div {color: red;}

form div div.content {color: green;}

新增多個類別：

如果您可以控制標記，您可以新增其他類別來定位特定元素：

form div.sub {color: red;}

form div div.content {/* Remains green */}

未來的解決方案：復原屬性

CSS 工作小組目前正在探索revert屬性：

div.content {
  all: revert;
}

此屬性將允許您明確重設子元素上的所有繼承樣式。截至 2023 年 4 月，大多數現代瀏覽器（Safari 和 Internet Explorer/Edge 除外）都支援復原屬性。

以上是CSS中如何防止子元素繼承？的詳細內容。更多資訊請關注PHP中文網其他相關文章！