瀑布

CSS Podcast 《004: The Cascade》

CSS 是「階層式樣式表」的縮寫。 串聯是一種演算法，可以解決多項 CSS 規則套用到 HTML 元素中的衝突。 因此，下列 CSS 樣式的按鈕文字為藍色。

button {
  color: red;
}

button {
  color: blue;
}

瞭解串聯演算法有助於瞭解瀏覽器如何解決這類衝突。 串場演算法分為 4 個不同階段。

  1. 位置和外觀順序：CSS 規則的顯示順序
  2. 優先度：這種演算法可決定哪個 CSS 選取器的比對結果最高
  3. Origin：CSS 的顯示順序及來源，無論是瀏覽器樣式、 從瀏覽器擴充功能或您編寫的 CSS 匯入 CSS
  4. 重要性：部分 CSS 規則的權重特別高。 特別是在 !important 規則類型中

外觀的位置和順序

CSS 規則的顯示順序及顯示方式將受到串聯的影響 計算衝突解決。

本課程開頭的示範是最直接的定位範例。 有兩個規則都有明確程度相同的選取器 所以最後要宣告的結果是最後一個

HTML 網頁中有許多不同來源的樣式 例如 <link> 標記 嵌入 <style> 標記 和內嵌 CSS，按照元素的 style 屬性定義。

如果您的 HTML 網頁頂端<link>包含 CSS， 然後是頁面底部包含 CSS 的另一個 <link>：最底層的 <link> 會最明確。 內嵌 <style> 元素也會發生同樣的情況。 這類關鍵字會越具體，且搜尋結果越下方。

這個按鈕採用藍色背景 由 <link /> 元素所包含的 CSS 定義。 將 CSS 規則設為深色的 CSS 規則位於第二個連結的樣式表中 而是因為其後座位置而套用。

這種順序也適用於內嵌的 <style> 元素。 如果在 <link> 之前宣告這些宣告 連結的樣式表的 CSS 將會最明確。

<style> 元素是在 <head> 中宣告， 在 <body> 中宣告 <link /> 元素時。 這表示它比 <style> 元素更具體。

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

按鈕的背景為何？

粉紅色
嵌入的 <style> 來源在該頁面較下方 <link> 標記，因此雖然 button 的明確性相同，但 樣式規則的「position」會勝出。
黃色
HTML 文件可能已讀取到黃色按鈕背景 但後來發現，已有同明確性的新規則 因此這個規則不適用於按鈕

優先權

「明確性」是一種演算法，可判斷哪個 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 以下是這些來源的明確程度 (從最具體到最具體的順序)：

  1. 使用者代理程式基本樣式。瀏覽器預設會將這些樣式套用至 HTML 元素。
  2. 本機使用者樣式：這些來源可以是作業系統層級，例如基本字型大小 偏好使用減少動態效果的情況 也可能來自瀏覽器擴充功能 例如可讓使用者為網頁編寫自訂 CSS 的瀏覽器擴充功能。
  3. 編寫 CSS：您編寫的 CSS。
  4. 編寫者：!important。您在已編寫聲明中加入的任何 !important。
  5. 當地使用者樣式 !important。任何來自作業系統層級的 !important 或瀏覽器擴充功能層級的 CSS
  6. 使用者代理程式 !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為何？

20px
Bootstrap 是已編寫來源的一部分，會失去本機的重要使用者樣式。
0.83em
使用者代理程式樣式來源失去了重要的本機使用者樣式。
2rem
這個 !important 使用者自訂樣式具有最具體的原點。
2ch
這個作者樣式屬於已編寫來源的一部分，會失去重要的本機使用者樣式。
1ch
這個作者樣式屬於已編寫來源的一部分，會失去重要的本機使用者樣式。

重要性

並非所有 CSS 規則的計算方式都相同 或提供相同的特異性

重要性的順序 (從不重要到不重要) 以下為最重要的：

  1. 一般規則類型，例如 font-size、background 或 color
  2. animation 規則類型
  3. !important 規則類型 (依來源與來源相同)
  4. transition 規則類型

主動動畫和轉場規則類型的重要性高於一般規則。 轉場效果的重要性高於 !important 規則類型。 這是因為動畫或轉場效果生效時 其預期行為是變更視覺狀態

使用開發人員工具瞭解部分 CSS 無法套用的原因

瀏覽器開發人員工具通常會顯示符合元素的所有 CSS 沒有被劃掉的讀者

瀏覽器開發人員工具的圖片，出現遭覆寫的 CSS 圖示

如果您要套用的 CSS 檔案完全沒有顯示 那就與元素不符 在此情況下 例如類別/元素名稱有錯字，或是某些無效的 CSS

隨堂測驗

測試您對瀑布的瞭解程度

Cascade 可用於...

將多種樣式套用至元素時解決衝突。
而這是該公司的主要目標之一，就是解決衝突。
確保在繪製時每個屬性只有一個樣式值。
文字只能採用一種顏色，而 Cascade 是決定文字顏色的方法。
評分與加權樣式規則。
得分和加權是 Cascade 的排序階段。
排序及篩選樣式屬性。
排序與篩選是 The Cascade 的各個階段，可協助您瞭解衝突解決各層面。

資源