繼承

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

CSS 屬性可以分為兩種型別

  • **繼承屬性**，預設情況下設定為父元素的計算值
  • **非繼承屬性**，預設情況下設定為屬性的初始值

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

繼承的屬性

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

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

css
p {
  color: green;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

單詞“強調文字”將以綠色顯示，因為em元素繼承了p元素的color屬性的值。它不會獲得屬性的初始值（即當頁面未指定顏色時用於根元素的顏色）。

非繼承的屬性

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

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

css
p {
  border: medium solid;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

單詞“強調文字”將不會有另一個邊框（因為border-style的初始值為none）。

注意

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

可以使用all速記屬性來控制所有屬性的繼承，該屬性將其值應用於所有屬性。例如

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

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

覆蓋繼承，一個例子

使用我們之前帶有border的例子，如果我們使用inherit顯式設定繼承，我們將得到以下結果

css
p {
  border: medium solid;
}

em {
  border: inherit;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

我們可以在這裡看到單詞“強調文字”周圍的另一個邊框。

另請參閱