繼承

假設您剛剛編寫了幾個 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> 元素具有 500font-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 可協助你在這些情況下派上用場。 例如,系統預設會沿用 colormargin 並非如此,因此您可以編寫這段內容:

/* 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
color
line-height
font-size
text-align

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

unset
superset
reset

資源