CSS Podcast 《004: The Cascade》
CSS 是「階層式樣式表」的縮寫。 串聯是一種演算法,可以解決多項 CSS 規則套用到 HTML 元素中的衝突。 因此,下列 CSS 樣式的按鈕文字為藍色。
button {
color: red;
}
button {
color: blue;
}
瞭解串聯演算法有助於瞭解瀏覽器如何解決這類衝突。 串場演算法分為 4 個不同階段。
- 位置和外觀順序:CSS 規則的顯示順序
- 優先度:這種演算法可決定哪個 CSS 選取器的比對結果最高
- Origin:CSS 的顯示順序及來源,無論是瀏覽器樣式、 從瀏覽器擴充功能或您編寫的 CSS 匯入 CSS
- 重要性:部分 CSS 規則的權重特別高。
特別是在
!important
規則類型中
外觀的位置和順序
CSS 規則的顯示順序及顯示方式將受到串聯的影響 計算衝突解決。
本課程開頭的示範是最直接的定位範例。 有兩個規則都有明確程度相同的選取器 所以最後要宣告的結果是最後一個
HTML 網頁中有許多不同來源的樣式
例如 <link>
標記
嵌入 <style>
標記
和內嵌 CSS,按照元素的 style
屬性定義。
如果您的 HTML 網頁頂端<link>
包含 CSS,
然後是頁面底部包含 CSS 的另一個 <link>
:最底層的 <link>
會最明確。
內嵌 <style>
元素也會發生同樣的情況。
這類關鍵字會越具體,且搜尋結果越下方。
這種順序也適用於內嵌的 <style>
元素。
如果在 <link>
之前宣告這些宣告
連結的樣式表的 CSS 將會最明確。
帶有 CSS 的內嵌 style
屬性會覆寫所有其他 CSS。
任何位置,除非宣告已定義 !important
。
排序也會按照 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);
}
隨堂測驗
測試您對瀑布的瞭解程度
如果您的網頁含有下列 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; }
按鈕的背景為何?
優先權
「明確性」是一種演算法,可判斷哪個 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 並非唯一套用到網頁的 CSS, 系統會將 CSS 來源納入考量。 這個來源包含瀏覽器的內部樣式表 瀏覽器擴充功能或作業系統新增的樣式 以及你編寫的 CSS 以下是這些來源的明確程度 (從最具體到最具體的順序):
- 使用者代理程式基本樣式。瀏覽器預設會將這些樣式套用至 HTML 元素。
- 本機使用者樣式:這些來源可以是作業系統層級,例如基本字型大小 偏好使用減少動態效果的情況 也可能來自瀏覽器擴充功能 例如可讓使用者為網頁編寫自訂 CSS 的瀏覽器擴充功能。
- 編寫 CSS:您編寫的 CSS。
- 編寫者:
!important
。您在已編寫聲明中加入的任何!important
。 - 當地使用者樣式
!important
。任何來自作業系統層級的!important
或瀏覽器擴充功能層級的 CSS - 使用者代理程式
!important
:預設 CSS 中定義的任何!important
、 使用 kubectl
如果您在所編寫的 CSS 中擁有 !important
規則類型
使用者在自訂 CSS 中使用 !important
規則類型,該規則的 CSS 是由誰勝出?
隨堂測驗
測試您對串聯來源的瞭解程度
測試您對串聯來源的瞭解,請考慮採用以下樣式 多個來源的規則:
使用者代理程式樣式
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
為何?
重要性
並非所有 CSS 規則的計算方式都相同 或提供相同的特異性
重要性的順序 (從不重要到不重要) 以下為最重要的:
- 一般規則類型,例如
font-size
、background
或color
animation
規則類型!important
規則類型 (依來源與來源相同)transition
規則類型
主動動畫和轉場規則類型的重要性高於一般規則。
轉場效果的重要性高於 !important
規則類型。
這是因為動畫或轉場效果生效時
其預期行為是變更視覺狀態
使用開發人員工具瞭解部分 CSS 無法套用的原因
瀏覽器開發人員工具通常會顯示符合元素的所有 CSS 沒有被劃掉的讀者
如果您要套用的 CSS 檔案完全沒有顯示 那就與元素不符 在此情況下 例如類別/元素名稱有錯字,或是某些無效的 CSS
隨堂測驗
測試您對瀑布的瞭解程度
Cascade 可用於...