繼承

在 CSS 中，繼承控制當元素沒有指定某個屬性的值時會發生什麼。

CSS 屬性可分為兩種型別：

請參閱任何 CSS 屬性的定義，以檢視特定屬性是否預設繼承（"Inherited: yes"）或不繼承（"Inherited: no"）。

繼承屬性

當元素上沒有為繼承屬性指定值時，該元素將獲取其父元素上該屬性的計算值。只有文件的根元素會獲取屬性摘要中給出的初始值。

繼承屬性的一個典型例子是color 屬性。考慮以下樣式規則和標記：

css

p {
  color: green;
}

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

"emphasized text" 這些詞將顯示為綠色，因為 em 元素繼承了 p 元素的 color 屬性值。它不會獲取屬性的初始值（這是頁面未指定顏色時用於根元素的顏色）。

當元素上沒有為非繼承屬性指定值時，該元素將獲取該屬性的初始值（如屬性摘要中所指定）。

非繼承屬性的一個典型例子是border 屬性。考慮以下樣式規則和標記：

css

p {
  border: medium solid;
}

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

"emphasized text" 這些詞將不會有另一個邊框（因為 border-style 的初始值是 none）。

inherit 關鍵字允許作者顯式指定繼承。它適用於繼承屬性和非繼承屬性。

您可以使用all 簡寫屬性一次性控制所有屬性的繼承，該屬性將其值應用於所有屬性。例如：

css

p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

這會將段落的 font 屬性樣式恢復為使用者代理的預設值，除非存在使用者樣式表，在這種情況下則使用使用者樣式表。然後它將字型大小加倍並應用 "bold" 的 font-weight。

使用我們之前關於border 的示例，如果我們使用 inherit 顯式設定繼承，我們將得到以下結果：

css

p {
  border: medium solid;
}

em {
  border: inherit;
}

html

<p>This paragraph has <em>emphasized text</em> in it.</p>

我們在這裡看到“emphasized text”周圍有另一個邊框。

規範
CSS 級聯與繼承第五級 # css-繼承

此頁面最後由 MDN 貢獻者在 2025 年 10 月 10 日修改。