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 完全沒有顯示，表示該 CSS 與元素並不相符。在這種情況下，您必須在其他地方尋找，例如類別或元素名稱拼寫錯誤，或是 CSS 無效。
隨堂測驗
測驗您對 Cascade 的相關知識
Cascade 可用於...