許多站長在美化網站時，最先想到的往往是直接編輯主題的樣式表。然而 WordPress 提供的「附加 CSS」功能，其實是一個更安全、更方便的方式，卻常被忽略。一旦主題更新，直接改動主題檔案的自訂樣式就會被覆蓋掉——這不只造成功能喪失，更可能打亂整個網站的視覺。認識附加 CSS 與子主題的運作原理，以及如何排查覆蓋問題，是每個站長都該掌握的基本技能。
後台「附加 CSS」功能的作用與優勢
附加 CSS 是 WordPress 自帶的最簡便調整樣式的方式。打開後台，進入「外觀」>「自訂」，然後在最下方就能看到「附加 CSS」的輸入框。這個功能會自動將你的代碼內嵌到網站的 <head> 標籤內，優先順序高於主題預設樣式，使調整立即生效。
相比直接編輯主題資料夾裡的 style.css，附加 CSS 最大的優點是「主題更新時不會遺失」。當你升級或切換主題時，主題檔案的所有更改都會被刷新，但附加 CSS 作為獨立的後台設定，會一直保留著。這對依賴主題定期更新以維持安全性和功能的站長來說，無疑是關鍵優勢。此外，後台直接編輯省去了透過 FTP 或檔案管理器存取伺服器的步驟，讓非技術背景的使用者也能輕鬆進行樣式微調。
附加 CSS 適合應付大多數日常調整——調整內邊距、改字體大小、修改顏色、隱藏特定元素之類的小修小改。但如果涉及複雜的自訂邏輯，比如條件式載入特定樣式，或者需要深度整合 PHP 函數，光靠這項功能就不夠了。
直接改主題 style.css 與附加 CSS 的差異
直接編輯主題資料夾內的 style.css，看似簡潔直接，卻隱藏著一個致命陷阱：主題更新時，所有你的改動都會被新版本覆蓋。這意味著每次主題升級都要重新手動修改一次，費力又容易遺漏。而且如果你忘記備份原始改動，新版本發佈後你可能連改了什麼都想不起來。
附加 CSS 則完全避免了這個問題，因為它儲存在資料庫裡，獨立於主題檔案之外。你的樣式始終保持著，不會被主題更新沖掉。從維護角度看，這降低了長期風險；從工作流程角度看，省去了每次升級都要重新修改的麻煩。
但也有例外：當你需要修改大量樣式、建立完整的自訂主題，或者想讓多個網站共用同一份樣式表時，子主題就派上用場了。
何時使用子主題
子主題是一個繼承父主題全部功能與樣式的新主題。它靠一個簡單的 style.css 聲明，告訴 WordPress 自己依賴哪個父主題。好處是你可以在 style.css 裡堆砌大量自訂代碼，同時父主題更新時不會影響你的改動——因為子主題是獨立的主題，不會被父主題的升級覆蓋。
使用子主題的典型場景包括：廣泛定製主題樣貌（遠超附加 CSS 能承載的量）、需要修改模板檔案（像 header.php、footer.php）、想讓團隊成員有明確的主題版本管理，以及打算把這套主題分享給其他人使用時。
相比之下，附加 CSS 更輕量、更快速上手；子主題則提供了更多控制權，但需要一定的檔案操作技能。大多數小型站點，附加 CSS 足以應對；一旦涉及系統級別的外觀改造，子主題就成為必要選擇。
認識 CSS 優先權與覆蓋問題
CSS 的優先權規則決定了當多個樣式作用在同一元素時，哪一個最終會顯示出來。理解這套規則，是排查「為什麼我的樣式不生效」的核心能力。
在 CSS 的優先級階級中，行內樣式（寫在 HTML 標籤的 style 屬性）權重最高，然後依序是 ID 選擇器、Class 選擇器與偽類、元素選擇器與偽元素。換句話說，用 ID 選擇器寫的樣式會蓋過 Class 選擇器的樣式，Class 選擇器又會蓋過元素選擇器。
相同權重的選擇器，則由載入順序決定——最後載入的樣式會覆蓋先前的。這就是為什麼附加 CSS 往往能覆蓋主題預設樣式，因為它在 <head> 的更後位置載入。
如果你寫了樣式卻不生效，最常見的原因就是選擇器權重不足。舉例來說，主題用 .button-primary 設定了按鈕樣式，而你只寫了 button { color: red; } 試圖改顏色，結果失敗了——因為 Class 選擇器的權重高於元素選擇器。這時你得改成 .button-primary { color: red; } 才行。
還有一種極端情況：樣式標記了 !important。這個聲明會強制讓樣式生效，無視所有優先權規則。主題或外掛有時會這樣寫，目的是確保某些樣式絕對不被改掉。如果你想蓋過一個標記了 !important 的樣式，你的新樣式也得加 !important，但這樣做會讓樣式表變得混亂且難以維護。
用瀏覽器開發者工具檢查樣式
當樣式不如預期時，瀏覽器開發者工具是診斷問題的最佳利器。在 Chrome、Firefox、Safari 等現代瀏覽器中，按 F12 或右鍵選擇「檢查」就能開啟開發者工具。
找到你要檢查的元素後，開發者工具會同時顯示該元素應用的所有樣式規則，以及哪些規則被後續規則覆蓋（通常會看到刪除線）。你可以看到每條規則來自哪個檔案、第幾行，甚至直接在開發者工具裡臨時改動樣式，立刻看到效果，不需要存檔刷新。
檢查時的一般流程是：找出對應的元素，在「樣式」面板（Styles）看列出的所有規則，從下往上讀（因為優先順序最高的通常在下方），確認是否有被覆蓋的規則。如果看到你的樣式被其他樣式線條劃掉，代表權重或載入順序有問題，這時你就得調整選擇器或優先級。
透過開發者工具，站長可以快速確認選擇器是否正確、優先級是否足夠、甚至外掛或主題是否默默插入了衝突的樣式。這項技能能省去大量摸索時間。
常見的調整陷阱與解決
新手經常掉進的坑，首先是選擇器選錯了。比如看到頁面上有個紅色標題，開發者工具裡看不到相應的 CSS，有時候是因為那個標題的顏色來自父元素的繼承，不是直接作用在標題本身。這時改標題的樣式沒用，得改父容器才行。
另一個常見情況是忘記了載入順序。你在附加 CSS 寫了一條樣式，結果發現某個外掛後載入，把你的樣式蓋掉了。解決方法可以是提高選擇器權重、加 !important，或者找出那個外掛使用的選擇器，用相同或更高權重的選擇器來制約。
還有就是寫選擇器時過度通用。比如寫 p { margin: 0; } 想去掉某個段落的邊距，結果整個網站所有段落都沒有邊距了。更安全的做法是給特定段落加個 Class，再針對那個 Class 調整。
有時候樣式改了但網站沒反映，往往不是 CSS 錯了，而是瀏覽器快取的問題。試著按 Ctrl+Shift+R 進行硬重新整理，強制瀏覽器重新載入所有資源。如果還是沒反映，檢查瀏覽器是否套用了特定的延遲載入或快取外掛。
選擇合適的自訂方式
決定該用附加 CSS 還是子主題時，問自己幾個問題：自訂量有多大？如果只是改幾個顏色和間距，附加 CSS 就夠；如果要全面改造外觀，子主題更適合。需要修改 HTML 結構嗎？附加 CSS 只能改樣式，子主題可以改模板。主題多久更新一次？如果很頻繁，附加 CSS 的「不怕更新」優勢就更明顯。小型部落格或企業網站通常能完成基本美化；線上商店或複雜的公司官網，可能需要子主題來確保長期穩定。