在 CSS 中，當多個選擇器對同一元素的相同屬性（如顏色）定義發生沖突時，瀏覽器會通過層疊規則（Cascading）解決沖突。具體優先級從高到低如下：

---

1. !important 規則（最高優先級）

• 在屬性值后添加 !important 的聲明優先級最高。
• 不推薦濫用（可能導致維護困難）。

.text { color: blue !important; } /* 最終生效 */

---

2. 來源和重要性

• 優先級排序：
  1. 用戶代理樣式（瀏覽器默認樣式）中的 !important
  2. 用戶樣式（用戶自定義，如瀏覽器插件）中的 !important
  3. 作者樣式（開發者寫的 CSS）中的 !important
  4. 作者樣式（普通）
  5. 用戶樣式（普通）
  6. 用戶代理樣式（普通）

---

3. 選擇器特異性（Specificity）（核心規則）

當沒有 !important 時，通過選擇器特異性權重決定優先級。權重由四部分構成（從高到低）：

• a：行內樣式（style="color: red;"，權重 1,0,0,0）
• b：ID 選擇器的數量（如 #header）
• c：類/偽類/屬性選擇器的數量（如 .class, :hover, [type="text"]）
• d：元素/偽元素選擇器的數量（如 div, ::before）

比較規則：從左到右逐級比較（a > b > c > d）。
示例：

#nav .item a { color: red; }  /* 特異性：0,1,1,1 (a=0, b=1, c=1, d=1) */
div ul li.active { color: blue; } /* 特異性：0,0,1,3 (a=0, b=0, c=1, d=3) */

• 第一條規則勝出（b 的權重更高）。

---

4. 源碼順序（最后規則）

如果選擇器特異性完全相同，則后定義的樣式生效：

.title { color: green; }
.title { color: orange; } /* 最終生效 */

---

解決沖突的實用技巧

1. 避免濫用 !important
   僅在覆蓋第三方庫等特殊場景使用。

2. 增加特異性
   通過添加父選擇器提升權重：

   .parent .text { color: red; } /* 特異性 0,0,2,0 */
   

3. 使用 CSS 變量
   通過變量統一管理顏色，減少沖突：

   :root { --main-color: red; }
   .text { color: var(--main-color); }
   

4. 模塊化 CSS
   使用 BEM、CSS Modules 等方法隔離作用域。

---

示例分析

<div class="box" id="unique">Hello</div>

#unique { color: blue; }    /* 特異性：0,1,0,0 */
div.box { color: green; }   /* 特異性：0,0,1,1 */
.box { color: red; }        /* 特異性：0,0,1,0 */

• 最終顏色為 blue（ID 選擇器特異性最高）。

---

通過理解這些規則，您可以精確控制樣式的優先級，高效解決沖突問題。