重新認識 CSS - Cascading & Specificity

留言

目錄

  1. 前言
  2. Cascading
    1. Origin and Importance
    2. Specificity
    3. Order of Appearance

CSS 可以在同份文件上使用多個 style sheet 來設定文件的樣式。如果你在不同 style sheet 內對同一個元素或屬性設定值時,就會 CSS 會透過 cascading 這個特性來解決這個衝突。本篇將介紹 CSS 的 Cascading 和 specificity。

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看 😃。

本文同步發表於 iT 邦幫忙:重新認識 CSS - Cascading & Specificity

「重新認識 CSS」系列文章發文於:

Cascading

cascade 接受給定 (given) 元素上的給定屬性的 declared value 的無序列表,根據如下所述按照其宣告的優先度對它們進行排序,並輸出一個 cascaded value

cascade 會使用各元素上屬性的 declared value 的無序列表,透過下面所述的 Cascading 流程,以宣告的優先度從高到低進行排序,並輸出一個 cascaded value:

  1. Origin and Importance
  2. Specificity
  3. Order of Appearance

Origin and Importance

  • Origin:根據宣告的來源 (origin)
  • Importance:該屬性值是否被宣告為 !important

各種來源的優先度按降序 (高到低) 排列:

  1. Transition declarations CSS Transitions
  2. Important user agent declarations
  3. Important user declarations
  4. Important author declarations
  5. Animation declarations CSS Animations Level 1
  6. Normal author declarations
  7. Normal user declarations
  8. Normal user agent declarations

Specificity

選擇器的 specificity 計算方式的背後是計算 abcd 個四個數字,此方法會分別在各個 selector 上計算,四個數字各別如下:

  • a:如果在直接在 HTML 元素上設定 style 屬性,那 a = 1,否則為 0
  • b:計算使用 ID selector 的數量
  • c:計算使用 class selector、attributes selector 和 pseudo-class 的數量
  • d:計算使用 type selector 和 pseudo-element 的數量

另外還有幾點要特別注意:

  • specificity 會忽略 universal selector
  • 如果你用 attributes selector 來 match id 屬性 (例如:[id=titan] ),也還是算成 attributes selector (也就是 a = 0b = 0c = 1d = 0 )

下面是 CSS 2.2 提供的 specificity 範例:

下面舉個實際的範例;

1
2
3
4
5
6
7
8
<head>
<style type="text/css">
#titan { color: red; }
</style>
</head>
<body>
<p id="titan" style="color: green">
</body>

因為 p 元素有設定 style 屬性,會覆蓋 style 元素中 以 ID selector #titan 的宣告 (因為 style 屬性的 specificity 更高),所以 p 元素的文字結果為綠色。

Order of Appearance

越放在 HTML 最後的宣告優先度越高:

  • imported style sheet 中的宣告會按順序來排序
  • HTML 外部連結的 style sheet 中的宣告會按順序來排序
  • style 屬性的宣告是根據 style 屬性出現在該元素的文件順序來排序,並且全部放在任何 style sheet 之後

資料來源:

分享:

討論區