JSP 外聯 CSS 樣式被覆蓋：優先級衝突與 !important 解決方案

現象描述

JSP 頁面引用外部 CSS 文件，兩個按鈕分別應用 .button_blue 和 .button_green 類。運行時「登錄」按鈕樣式正常，「註冊」按鈕樣式失效。但將樣式內聯到頁面 <style> 標簽中則生效。

根本原因：CSS 優先級與後載入覆蓋

1. 頁面引用了 多個 CSS 文件，且加載順序導致後載入的文件覆蓋了先前的同名類樣式。
2. 其他 CSS 文件中同樣定義了 .button_green，且由於加載順序在後，其優先級相同時「後來者居上」生效。
3. 將樣式移至頁面 <head> 內聯後，因內聯樣式優先級高於外部文件，故生效。

排查步驟

1. 打開 Chrome DevTools（F12） → Elements 面板 → 選中「註冊」按鈕。
2. 在 Styles 面板查看 .button_green 樣式來源，被劃線的即為被覆蓋的聲明。
3. 點擊文件名跳轉到 Sources 面板，確認是哪個 CSS 文件定義了覆蓋樣式。

解決方案

方案一：調整 CSS 引用順序（推薦）

確保自定義 CSS 文件在 最後引用，這樣其同名類聲明優先級最高。

<link rel="stylesheet" href="common.css" />
<link rel="stylesheet" href="third-party.css" />
<link rel="stylesheet" href="custom.css" /> <!-- 最後加載 -->

方案二：提高選擇器具體性

/* 增加父級類名提高權重 */
.my-form .button_green { ... }

方案三：使用 !important（最後手段）

.button_green {
    background: #aef055 !important;
    /* 其他屬性同理 */
}

注意：濫用 !important 會破壞樣式層級結構，僅在無法調整順序或具體性時使用。

最佳實踐總結

• 規範 CSS 文件加載順序：Reset → 基礎 → 組件 → 頁面/業務。
• 採用 BEM 或模塊化命名避免類名衝突（如 .btn--green 而非 .button_green）。
• 使用構建工具合併壓縮 CSS，減少請求並控制順序。