CSS繼承

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

文章最後更新於 2022 年 11 月 6 日

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

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

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

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

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

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

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

CSS樣式表繼承的邏輯

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

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

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

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

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

p{
color:#0066CC;
}

See the Pen CSS inheritance-color by SLS (@SLSuccess) on CodePen.

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

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

不是所有屬性都具備繼承的特性

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

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

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

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;
}

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

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

繼承來的樣式權重低於全域選擇器

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

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

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

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

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

See the Pen universal selector vs inheritance by SLS (@SLSuccess) on CodePen.

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

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

延伸閱讀:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *