CSS繼承(inheritance):1個可能被你忽略的重要觀念

更新日期: 2022 年 11 月 6 日

想成功地套用CSS樣式到網頁上，除了瞭解權重(specificity)之外，CSS繼承(inheritance)也是一個很重要的觀念，可以讓你更清楚樣式套用的優先程度，讓你期望的樣式順利的顯示。

如果你只知道CSS權重，卻沒有CSS繼承的概念，會讓你在使用CSS時，總是有種只知其一，不知其二，好像少了什麼東西的感覺，常常弄不懂樣式到底要怎麼寫，才可以如你所願的展現出來。

本文將帶你瞭解繼承的邏輯是什麼，以及2個繼承的重要特性，讓你簡單弄懂CSS世界中的繼承是什麼。

快速閱讀

CSS繼承與生活中的繼承一樣嗎?

瞭解CSS繼承前，先來想一下，CSS使用繼承這個詞的用意是什麼呢?

在生活中，聽到繼承可能會讓你聯想到，繼承了一筆遺產，因為有人過世，這個亡故的人遺留的財產，由他的繼承人接受，而通常繼承的人都是其子孫。

CSS繼承(inheritance)便使用這樣一個承繼財產的概念，但不需要任何人過世，就可以直接繼承，在CSS世界中，所繼承的是樣式，不是財產，也不需要有任何元素滅失。

CSS是讓HTML的元素以你所設計的樣式展現在網頁上，所以繼承的原理是立足於HTML的架構之上。

舉個簡單的例子來說，用HTML的段落標籤在網頁上顯示一段文字，但這段文字中的一個字要使用斜體，於是我們就把要呈現斜體的文字放入標籤中。

<p><i>self-learning</i> is the key to success</p>

這個時候，HTML就有了親代與子代的結構，包覆著標籤，就是親代，就是子代，講白話一點就是是父母，是小孩。

而當你給段落標籤一個CSS樣式，例如文字顏色要是藍色時，子代便會繼承藍色文字的這個樣式。

p{
color:#0066CC;
}

斜體字會顯示藍色是繼承而得的，因為你並沒有為斜體標籤，設定文字藍色的樣式，但網頁上的斜體的文字卻以藍色呈現，斜體 Self-Learning 的繼承了他的親代的樣式。

因為有親代、子代的關係，便會擁有一樣的樣式，這就是CSS的繼承邏輯，懂得HTML結構，就可以弄懂繼承的概念。

瞭解CSS的繼承概念後，你還要再知道2件事。

首先，並不是所有的CSS屬性天生就有繼承的特性，前面提到的color屬性具備繼承性質，但你很常會使用到的border屬性就沒有繼承的性質。

延續前面的例子，為文字加上border樣式，如果border具有繼承的特性的話，那麼斜體字Self-Learning也會再加上一個方框才對，然而網頁上的斜體字並沒有方框，代表 border屬性沒有繼承的特性，所以  標籤只有繼承藍色文字的樣式，而沒有繼承橘色的邊框。

p{
color:#0066CC;
border:5px solid #fcb900 ;
padding:5px;
}

See the Pen Untitled by SLS (@SLSuccess) on CodePen.

有些屬性預設繼承的特性，有些則沒有，通常多數盒模型相關的屬性都不具備繼承的特性，像是這邊說明的border，以及margin、padding、background等。

如果很想全面瞭解具備繼承特性的CSS屬性有那些，可以參考W3C的列表。CSS屬性是否具備繼承的性質，其實就是這個屬性的預設是否有繼承，而這個設定是可以利用關鍵字來改變。

如果你希望例子中的斜體字可以繼承border屬性，使用inherit這個關鍵字，便可以直接繼承樣式了，像是下方的語法這樣。

p{
color:#fcb900;
border:5px solid #0693e3;
padding:10px;
}
i{
  border:inherit;
}

《CCS大全》第四版有針對CSS全域關鍵字 inherit 、initial、unset做有系統的解釋，對於想弄懂關鍵字的朋友，推薦閱讀《CCS大全》第四版，這本書將基礎觀念說明得很清楚，利用各式淺顯的例子，幫你釐清在使用各種樣式時可能會產生的混亂，讓你在龐雜的屬性與屬性值中，掌握CSS的脈絡。

關於CSS的繼承觀念，你必須知道的第2件事，是繼承來的樣式沒有任何權重。

在《CSS權重(specificity)：熟悉這6個樣式級別，讓你的樣式被採》的文章中，我們簡單的將選擇器的權重分為6個等級，其中權重最低的級別為全域選擇器，任何權重比他高的樣式，都可以蓋掉全域選擇器的樣式。

不過當有繼承的情況時，有權重勝過於沒有權重，繼承而來的樣式碰上全域選擇器的樣式，會被覆蓋掉。也就是說，全域選擇器的權重雖然是各種選擇器間最低的，但至少還有權重，對於完全沒有權重的繼承樣式，當然是全域選擇器的樣式勝出。

直接來看例子，同樣的，我們延續前面的舉例來做說明，在CSS中多加個全域選擇器，標籤內的文字便不繼承藍色文字了，而是採用全域選擇器所指定的樣式，紅色文字。

*{color:red;
}
  
p{
color:#0066CC;
padding:10px;
}

從例子中可以看到，斜體字Self-Learning變成紅字，因為採用了全域選擇器的樣式，所以在設定全域選擇器中的樣式時，需要多留意一下，你的設計會不會把一些你視為理所當然，應該繼承的樣式給改了。

以上就是有關CSS的繼承觀念說明，簡單的CSS基礎觀念，但卻可以幫助你免避開一些樣式不受控制的陷阱。