樣式的繼承與聯集

使用選擇器套用樣式時，除了權重，另外的重要觀念就是「繼承」和「聯集」，繼承表示子元素會自動套用父元素的樣式屬性，聯集則是同一個元素，套用相同權重選擇器的樣式屬性，這篇教學會介紹樣式的繼承與聯集，以及如何透過瀏覽器的開發者工具，觀察樣式的繼承。

快速導覽：

• 樣式的繼承
• 觀察樣式繼承
• 樣式的聯集

樣式的繼承

繼承是 CSS 的基本行為，意思是「子元素自動套用父元素的樣式屬性」，不過實際操作時，卻會發現「有些樣式屬性會繼承，有些樣式屬性則不會繼承」的狀況，下方列出會「預設」具有繼承特性的樣式屬性，這時候通常大多數「文字樣式」的屬性都會具有繼承特性。

注意，雖然繼承會保留樣式，但並不會繼承任何權重，所以權重最低，可以透過其他方式覆蓋。

以下方的 HTML 和 CSS 為例，雖然只設定 #apple 的文字顏色和大小，但卻會影響到內容所有元素的文字樣式。

<!-- HTML 程式碼 -->
<div id="apple">
  <h2>oxxo.studio</h2>
  <div>STEAM 教育學習網</div>
  <p>hello world!!!</p>
</div>

<!-- CSS 程式碼 -->
<style>
  #apple {
    color: red;
    font-size: 30px;
  }
</style>

不過如果是大多數方框模型 ( box model ) 的樣式屬性，例如 margin、padding、background 或 border...等，則不具有繼承的特性，目的也是為了避免套用樣式後，影響到整體排版，以下方的 HTML 和 CSS 為例，雖然設定了 #apple 的邊框和間距，但內容卻完全不會被影響。

<!-- HTML 程式碼 -->
<div id="apple">
  <h2>oxxo.studio</h2>
  <div>STEAM 教育學習網</div>
  <p>hello world!!!</p>
</div>

<!-- CSS 程式碼 -->
<style>
#apple {border: 1px solid #000;}
</style>

觀察樣式繼承

使用 Chrome 開啟網頁後，使用快速鍵 ( 通常是 alt + ctrl + i 或 alt + command + i ) ，或使用選單開啟「開發者工具」，可以觀察具有父子關係的元素，彼此的樣式是否繼承。

開啟開發者工具後，選擇 Element 頁籤就能觀察網頁中的元素結構，左側 Styles 頁籤裡能觀察特定元素的樣式。

在 Styles 頁籤，如果有看見 inherited from XXXXX 的樣式，表示這些樣式屬性是透過繼承而來。

如果繼承的樣式屬性裡，有「不會被繼承」的樣式，那麼在 inherited from XXXXX 中這些屬性就會以較低亮度或灰色的方式呈現。表示子元素不會套用這些屬性，透過瀏覽器的開發者工具，可以很方便又快速的觀察樣式屬性的繼承。

樣式的聯集

如果說繼承是父元素的樣式繼承到子元素，聯集就是單一元素「套用多個選擇器的樣式」，通常套用樣式時，會先參考「權重」，而權重的參照標準不外乎就是行內樣式、順序、計算數值以及是否有添加 !important，但如果在權重相同的狀況下，就會進行樣式的聯集。

更多參考：CSS 選擇器的優先順序 ( 權重 )

舉例來說，下方是兩個 h1 的樣式，在包含的樣式屬性相同的狀況下，會按照順序執行，所以 h1 會呈現藍色文字。

h1 {color: red;}
h1 {color: blue;}

但如果樣式裡具有不同的數性，則這些屬性會保留，只有重複的屬性會根據權重被取代，例如下方的 CSS，就會產生文字大小 30px，藍色文字，黃色底色的效果。

h1 {
  color: red;
  background: #ff0;
}
h1 {
  color: blue;
  font-size: 30px;
}

小結

CSS 的繼承和聯集其實很簡單，基本上不需要刻意去記憶，因為就連撰寫簡單的 CSS 都會不斷用到，透過不斷的練習就會慢慢熟悉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～