CSS（Cascading Style Sheets）是前端開發中不可或缺的一部分，通過對 HTML 元素定義樣式，來達到美化網頁的目的。CSS 疊加樣式是 CSS 樣式規則的一種特殊模式，多個 CSS 樣式規則作用于同一個元素，如何取舍就需要根據 CSS 疊加樣式機制來進行解析。

CSS 樣式規則一般是通過選擇器和聲明組成的，選擇器指定元素，聲明指定元素樣式。CSS 疊加樣式有以下三種：

層疊順序（Cascading Order）

層疊順序基于樣式來源和優先級來決定哪一個 CSS 規則將應用。它遵循以下原則：
1. 瀏覽器默認樣式表< 繼承樣式表< 嵌入樣式表< 外部樣式表< 行內樣式< !important。
2. 樣式來源相同時，后定義的規則具有更高的優先級。

特殊性（Specificity）

特殊性是為了區分具有相同選擇器的不同樣式規則。當元素匹配到多個規則時，具有更高特殊性的規則將具有優先權。特殊性基于以下原則進行計算：
1. ID 選擇器（#id）權重為 1,0,0,0。
2. 類選擇器、屬性選擇器和偽類（.class，[attribute]，:hover）權重為 0,1,0,0。
3. 元素選擇器和偽元素選擇器（tag，::before）權重為 0,0,1,0。
4. 通用選擇器和組合器（*、+, >, ~）權重為 0,0,0,1。

繼承（Inheritance）

繼承是指在某些情況下，某個元素的屬性值可以從其父元素繼承。不是所有屬性都可以繼承，繼承的屬性是有限的。當子元素有與繼承屬性相同的屬性值時，該屬性值會覆蓋父元素的屬性值。比如 color、font-family、font-size 等屬性就是可以繼承的屬性。

CSS 疊加樣式機制非常重要，可以通過提高代碼的清晰度和可讀性，為開發者提供更多的自由和靈活性，大幅提高前端開發的效率。