繼承

CSS Podcast - 005：繼承

假設您剛編寫了一些 CSS 讓元素看起來像按鈕，

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

接著，您可以在內容文章中新增連結元素，並將 class 的值設為 .my-button。但是，發生問題，文字不是您預期的顏色。為什麼會發生這個問題？

部分 CSS 屬性如果未指定值，就會沿用。 在這個按鈕中，按鈕會沿用這個 CSS 的 color：

article a {
  color: maroon;
}

本課程將說明發生原因，以及繼承是一項強大功能，協助您減少編寫 CSS 內容。

繼承流程

我們來看一下沿用機制 使用以下 HTML 程式碼片段

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

根元素 (<html>) 是文件中的第一個元素，因此不會繼承任何元素。在 HTML 元素中加入一些 CSS 系統就會開始串聯文件

html {
  color: lightslategray;
}

根據預設，其他元素會繼承 color 屬性。html 元素具有 color: lightslategray，因此所有可沿用顏色的元素現在都會有 lightslategray 顏色。

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

只有 <p> 是最深的巢狀元素，因此只有斜體文字。繼承只會向下流動，不會向上流到父項元素。

預設繼承哪些屬性？

預設不會繼承所有 CSS 屬性 但有很多項目。以下提供預設繼承的完整屬性清單，這些屬性擷取自所有 CSS 屬性的 W3 參考資料：

繼承的運作方式

每個 HTML 元素都已定義每個 CSS 屬性，並有初始值。初始值是不會沿用的屬性，且在 Cascade 無法計算該元素的值時，會以預設值顯示。

可向下繼承的屬性，且子項元素會取得代表其父項值的計算值。這表示如果父項將 font-weight 設為 bold，所有子項元素都會變成粗體，除非子項元素的 font-weight 設為不同的值，或者使用者代理程式樣式表擁有該元素的 font-weight 值。

如何明確繼承及控制繼承

繼承可能以非預期方式影響元素，因此 CSS 提供實用工具。

inherit 關鍵字

您可以透過 inherit 關鍵字，讓任何屬性繼承父項的計算值。建立例外情況是使用這個關鍵字的實用方式。

strong {
  font-weight: 900;
}

這個 CSS 程式碼片段會將所有 <strong> 元素設為 900 的 font-weight，而非預設的 bold 值 (相當於 font-weight: 700)。

.my-component {
  font-weight: 500;
}

.my-component 類別會將 font-weight 設為 500。如要讓 .my-component 內的 <strong> 元素也新增 font-weight: 500：

.my-component strong {
  font-weight: inherit;
}

現在，.my-component 中的 <strong> 元素會有 500 的 font-weight。

您可以明確設定這個值，但如果您日後使用 inherit 和 .my-component 的 CSS 變更，就能確保 <strong> 會自動更新。

initial 關鍵字

繼承可能會導致元素發生問題，initial 則提供強大的重設選項。

之前，您學到 CSS 中的每個屬性都有預設值。 initial 關鍵字會將屬性設回該初始預設值。

aside strong {
  font-weight: initial;
}

這段程式碼會將 <aside> 元素內所有 <strong> 元素的粗體粗細移除，改為設為一般權重，也就是初始值。

unset 關鍵字

如果預設是否沿用屬性，unset 屬性的行為會有所不同。如果預設沿用屬性，unset 關鍵字將與 inherit 相同，如果預設未沿用該屬性，unset 關鍵字會等於 initial。

記住預設繼承的 CSS 屬性可能並不容易，而 unset 有助於在此情況中派上用場。例如，color 會預設繼承，但 margin 不是，因此您可以編寫：

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

現在，移除 margin，color 會還原為繼承的計算值。

您也可以將 unset 值與 all 屬性搭配使用。回到上述範例，如果全域 p 樣式取得額外的屬性會怎麼樣？系統只會套用您為 margin 和 color 所設定的規則。

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

如果您將 aside p 規則改為 all: unset，無論日後套用至 p 的全域樣式為何，系統一律會取消設定這些規則。

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

隨堂測驗

測驗您對於繼承的瞭解程度

下列何者是可沿用的屬性？

animation
動畫不會向下傳遞給子項。
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

除非沒有可沿用，而是 initial，否則哪一個值的行為會像是 inherit？

reset
輸入的值無效，請再試一次！
unset
🎉
superset
輸入的值無效，請再試一次！

資源