繼承

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 屬性。 初始值是未沿用的屬性，因此無法顯示為預設值 就會知道序列圖無法計算該元素的值。

可以沿用而來的屬性 子項元素會取得代表其父項值的計算值。 也就是說，如果父項將 font-weight 設為 bold，所有子元素都會以粗體顯示 除非其 font-weight 設為不同的值 或是使用者代理程式樣式表，則具有該元素的 font-weight 值。

如何明確沿用和控管繼承

沿用機制可能會以非預期的方式影響元素，讓 CSS 提供以下工具：

inherit 關鍵字

您可以使用 inherit 關鍵字，讓任何屬性沿用其父項計算的值。 這個關鍵字相當實用的實用做法，就是建立例外狀況。

strong {
  font-weight: 900;
}

這個 CSS 程式碼片段會將所有 <strong> 元素的 font-weight 設為 900。 而不是預設的 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
🎉

除非沒有可以繼承的值，否則哪個值的運作方式與 inherit 相同， 那麼運作情形就像「initial」？

reset
不是有效的值，請再試一次！
unset
🎉
superset
不是有效的值，請再試一次！

資源