CSS 層疊和優先級基礎：理解全貌

一、優先級的基本概念

優先級指的是當多個 CSS 規則應用於同一元素時，瀏覽器如何確定哪些規則具有高優先級，哪些規則具有低優先級。

每個選擇器都有一定的優先級，優先級由選擇器的組成方式、選擇器的權重、選擇器的位置決定，權重高的選擇器優先級也越高。權重相同的情況下，後定義的規則高於先定義的規則。

在 CSS 層疊中，同一個元素上不同選擇器的優先級是通過四個級別（即權重）來進行比較的，這四個級別由以下部分組成：

1. 直接在樣式屬性中指定的樣式（例如 style=”font-size:14px”）的權重為 1000。
2. ID選擇器的權重為 100。
3. 類、偽類和屬性選擇器的權重為 10。
4. 元素和偽元素選擇器的權重為 1。

請看下面的示例：

 p#foo                          /* ID選擇器 + 元素選擇器，權重為 101 */
 .bar .baz                      /* 類選擇器 + 類選擇器，權重為 20 */
 div[attr="value"] > a:hover    /* 屬性選擇器 + 元素選擇器 + 偽類選擇器，權重為 13 */

二、CSS 繼承

CSS 繼承指的是父元素的某些樣式被子元素繼承。某些樣式（例如背景、字號、字體顏色等）會被子元素自動繼承，而某些樣式（例如邊框、外邊距、內邊距等）則不會繼承。

可以使用 inherit 關鍵字來明確指定某個屬性應該被繼承。例如：

p {
  color: red;
}

em {
  color: inherit;    /* em 元素的文字顏色與父元素相同（即為紅色） */
}

三、重要性

CSS 規則中可以使用 !important 來強制覆蓋其他規則的優先級，這個時候無論是內聯樣式還是 ID 選擇器，都無法超越其優先級。

雖然使用 !important 可以靈活地解決某些布局問題，但它經常被誤用，應當謹慎使用。

四、層疊順序

層疊順序指的是當多個元素疊放在一起時，瀏覽器如何決定哪個元素在哪個元素的前面或後面。層疊順序又稱為上下文層疊、z 軸層疊等。

下面是常見的元素的默認層疊順序（從下到上）：

1. 背景和邊框（背景色、背景圖片、border）
2. 塊級盒子
3. 浮動盒子
4. 行內盒子（包括行內塊盒子）
5. z-index 值為 auto 的定位盒子
6. z-index 值為 0 的定位盒子
7. z-index 值為整數的定位盒子（越大越靠上）
8. z-index 值為負數的定位盒子（越小越靠下）

當元素的層疊順序相同時，先出現在文檔流中的元素會出現在後出現的元素前面。如果一個元素被另一個元素包含，則優先級更高的元素將更接近於用戶。

五、總結

了解 CSS 的層疊和優先級原理對於編寫高效、優雅的 CSS 代碼至關重要。在樣式衝突時，通常可以通過設置合適的權重或者使用繼承來解決，只有在必要的情況下使用 !important 以及層疊順序來調整元素之間的疊放關係。