CSS Podcast - 004: The Cascade
CSS 是「階層式樣式表」的縮寫。 Cascade 是用於解決衝突的演算法,其中有多個 CSS 規則套用到一個 HTML 元素。因此,使用下列 CSS 樣式的按鈕文字將為藍色。
button {
color: red;
}
button {
color: blue;
}
瞭解 cascade 演算法,有助您瞭解瀏覽器如何解決這類衝突。 Cascade 演算法分為 4 個不同的階段。
- 位置和外觀:CSS 規則顯示的順序
- 明確性:用來判定哪個 CSS 選取器相符的演算法
- 來源:CSS 顯示順序及來源,無論是瀏覽器樣式、瀏覽器擴充功能中的 CSS,還是您編寫的 CSS
- 重要性:部分 CSS 規則的權重較高,尤其是
!important
規則類型時
位置與顯示順序
在計算衝突解決方案時, CSS 規則的顯示順序和顯示方式都會納入考量。
本課程一開始提供的示範內容是最簡單明瞭的位置,有兩個規則具有明確性相同的選取器,因此最後要宣告的規則會勝出。
樣式可能來自 HTML 網頁上的各種來源,例如 <link>
標記、嵌入的 <style>
標記,以及根據元素 style
屬性中定義的內嵌 CSS。
如果您的 <link>
在 HTML 頁面頂端包含 CSS,那麼網頁底部的另一個 <link>
包含 CSS:底部 <link>
的明確程度最為明確。
嵌入 <style>
元素也是如此。從網頁下方的底部取得,
<link />
元素。將設為深色的 CSS 規則位於第二個連結的樣式表中,且會因較晚的位置而套用。此順序也適用於嵌入的 <style>
元素。如果這些宣告是在 <link>
之前宣告,則連結的樣式表的 CSS 會明確。
<style>
元素是在 <head>
中宣告,而 <link />
元素是在 <body>
中宣告。這表示該元素的具體性比 <style>
元素更加明確除非宣告已定義 !important
,否則含有 CSS 的內嵌 style
屬性會覆寫所有其他 CSS,無論其位置為何。
排名也會依照 CSS 規則的順序決定。
在此範例中,由於上次宣告 background: purple
,元素會呈現紫色背景。由於綠色背景的宣告位置在紫色背景之前,因此瀏覽器現在會忽略綠色背景。
.my-element {
background: green;
background: purple;
}
如果能夠為同一個屬性指定兩個值,簡單的方式就能為不支援特定值的瀏覽器建立備用項。在下一個範例中,font-size
宣告兩次。如果瀏覽器支援 clamp()
,系統就會捨棄先前的 font-size
宣告。如果瀏覽器不支援 clamp()
,系統會遵循初始宣告,而字型大小為 1.5rem
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
隨堂測驗
測驗您對 Cascade 的相關知識
如果您的網頁包含下列 HTML:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <button>I am a button</button> <style> button { background: pink; } </style> </body> </html>
在 styles.css
中,符合下列 CSS 規則:
button { background: yellow; }
按鈕的背景是什麼顏色?
<style>
來源位於頁面更下方的位置,而非 <link>
標記,因此,雖然 button
的具體性相同,但樣式規則的「位置」則會勝出。優先權
明確程度是一種演算法,會使用加權或評分系統來計算最具體的 CSS 選取器。設定更明確的規則後,即使其他符合選取器的 CSS 稍後出現在 CSS 中,系統仍會套用規則。
在下一堂課中,您可以進一步瞭解如何計算具體程度,不過只要記住一些幾點,就能避免過多的具體問題。
與單獨指定元素的 CSS 相比,指定元素類別的 CSS 會讓規則更明確,因此已套用規則更加重要。也就是說,使用下列 CSS 時,h1
仍會以紅色顯示,即使兩個規則都符合,而 h1
選取器的規則之後也會出現在樣式表中。
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
id
可讓 CSS 更加具體,因此套用至 ID 的樣式會覆寫許多其他套用的方式。因此,我們通常不建議將樣式附加至 id
。但使用其他樣式可能會難以覆寫該樣式。
優先權採累計方式製
如下一堂課所述,每種選取器都會獲得代表其具體程度的選取點,用來將用於指定元素的所有選取器點會合在一起。也就是說,如果您使用 a.my-class.another-class[href]:hover
等選取器清單指定元素,就會很難以其他 CSS 覆寫。因此,為了讓 CSS 更能重複使用,建議您盡可能簡化選取器。需要時,以明確性做為取得元素的工具,如果可以的話,建議您考慮重構冗長的特定選取器清單。
來源
您編寫的 CSS 並非唯一套用到網頁。Cascade 會考量 CSS 的來源。這個來源包括瀏覽器的內部樣式表、由瀏覽器擴充功能或作業系統新增的樣式,以及您編寫的 CSS。這些來源的具體顯示順序 (從最廣泛到最明確) 如下:
- 使用者代理程式基本樣式。根據預設,瀏覽器會套用這些樣式,套用至 HTML 元素。
- 本機使用者樣式。這些來源可能是作業系統層級 (例如基本字型大小) 或偏好動作減少等。也可能來自瀏覽器擴充功能 例如可讓使用者自行為網頁編寫自訂 CSS 的瀏覽器擴充功能。
- 已編寫的 CSS。您編寫的 CSS。
- 作者:
!important
。您在已授權聲明中加入的任何!important
。 - 本機使用者樣式
!important
。任何來自作業系統或瀏覽器擴充功能層級 CSS 的!important
。 - 使用者代理程式
!important
。瀏覽器提供在預設 CSS 中定義的任何!important
。
如果您編寫的 CSS 中有 !important
規則類型,且使用者在自訂 CSS 中有 !important
規則類型,請問 CSS 會勝出?
隨堂測驗
測驗您對 Cascade 來源的相關知識
測試您對 Cascade 來源的瞭解,並考慮各種來源的下列樣式規則:
使用者代理程式樣式
h1 { margin-block-start: 0.83em; }
啟動
h1 { margin-block-start: 20px; }
頁面作者樣式
h1 { margin-block-start: 2ch; } @media (max-width: 480px) { h1 { margin-block-start: 1ch; } }
使用者自訂樣式
h1 { margin-block-start: 2rem !important; }
接著,根據下列 HTML:
<h1>Lorem ipsum</h1>
h1
的最後一個margin-block-start
是?
!important
使用者自訂樣式擁有最明確的來源。重要性
並非所有 CSS 規則的計算方式都相同,或是彼此的明確性。
以下是重要性順序,從重要性到最重要程度如下:
- 一般規則類型,例如
font-size
、background
或color
animation
項規則類型!important
規則類型 (遵循來源的順序相同)transition
項規則類型
使用中的動畫和轉換規則類型的重要性高於一般規則。轉換重要性高於 !important
規則類型時。這是因為當動畫或轉換變為啟用時,預期行為是變更視覺狀態。
使用開發人員工具瞭解無法申請某些 CSS 的原因
瀏覽器開發人員工具通常會顯示所有可能與某個元素相符的 CSS,以及這些 CSS 未加上刪除線的 CSS。
![瀏覽器開發人員工具的圖片,當中有遭覆寫的 CSS 排除](https://web.dev/static/learn/css/the-cascade/image/an-image-browser-devtool-8306b56aa8a21.png?authuser=8&hl=zh-tw)
如果您預期的 CSS 完全沒有顯示,表示該 CSS 與元素並不相符。在這種情況下,您必須在其他地方尋找,例如類別或元素名稱拼寫錯誤,或是 CSS 無效。
隨堂測驗
測驗您對 Cascade 的相關知識
Cascade 可用於...