概念

CSS 代表的是 Cascading Stylesheets
而 cascade 是指 當同一個元素被套用的 CSS 規則有衝突或相抵觸時，要如何處理

cascade 可以拆分成四階段：

• Position & order of appearence
• Specificity
• Origin
• Importance

Position & order of appearance

CSS 規則出現位置以及寫的順序

＊ 相同權重，後蓋前

/* 兩組 CSS 規則具有相同權重，會套用最後一組規則的樣式 */
button {
  color: red;
}

button {
  color: blue;
}

樣式可能會寫在 HTML 的不同地方，例如：<link> 、內嵌在<style>裡面或是以 inline 形式寫在元素的 style 屬性裡。如果在 HTML 的開頭處有一個引用了一份 <link>，接著在 HTML 的最後又再引用一份 <link>，最終會採用最後引用的那份 <link>，<style> 也一樣，寫在越後面的樣式，權重越高，越優先。

但，inline 寫法會蓋過所有其他的 CSS，除非是有加上 !important 的規則！

而同一個 selector 中，若有宣告同樣的屬性，也會以最後宣告的那項為主，例如：

.item {
  background: red;
  background: #cdcdcd; /* 寫在最後最優先 */
}

像這樣寫兩項相同屬性的作法也適合用在 fallback 上，避免瀏覽器不支援特定的屬性值，例如

.article {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

＊瀏覽器會忽略看不懂的屬性值，接著繼續解析剩下的 CSS

Specificity

用來決定哪一個 CSS Selector 最優先的演算機制，使用一種權重或是評分系統來做計算。

Selector 越具體的，越重要，會最優先，例如：

<h1 class="title">Heading</h1>

.title {
  color: red;
}

h1 {
  color: blue;
}

使用 class 選取比單獨使用 element 選取更明確、更具體一些，所以最終 Heading 會是紅色，即使 h1 規則寫在最後面。

而 Specificity 是可以累加計算的，每一種選取器都可以對應到一個點數，selector 寫得越長越多也就越難蓋過，selector 盡可能寫的越簡潔越好。

Origin

CSS 規則除了寫在頁面上的還有其他來源，優先度由高到低依序為：

• User agent !important：瀏覽器預設樣式中有加上!important 的
• Local use styles !important：來自作業系統或是瀏覽器的外掛樣式中有加上!important 的
• Authored !important：自己寫的 CSS 規則中有加上 !important 的
• Authored CSS：自己寫的 CSS 規則
• Local user styles：來自作業系統，例如：基本字體大小，或是來自瀏覽器的外掛
• User agent base styles：瀏覽器預設樣式

Importance

不同的 CSS 規則也會有不同的重要性，重要性由高到低為：

1. transition
2. !important
3. animation
4. normal，例如：font-size、color

animation 或是 transition 的優先度會高於 normal 規則，而在 transition 會高於 !important 是因為預期 transition 就是要來改變顯示的狀態。

小結

當有衝突時，會進入 cascade 的四階段，一層一層過濾，篩選勝出的那項規則

1. 先看 Importance
2. 確認CSS 的 Origin 以及是否有加 !important
3. Specificity，計算 selector 分數
4. 如果以上都一樣，最後看放置的位置及順序

參考自 MDN Web Docs - Introducing the CSS Cascade

參考資源

MDN Web Docs - Introducing the CSS Cascade