WordPress 附加的 CSS 沒生效？5 個原因排查

把 CSS 一行行貼進「附加的 CSS」欄位，按下發布，切回前台重新整理，畫面卻跟改之前一模一樣，字距沒變、按鈕顏色沒變，連留白都紋風不動。附加的 CSS 其實是 WordPress 從 4.7 版就有的內建功能，都快十年的老功能了，直到現在還是常有人第一次用就卡在「明明存檔了，怎麼看起來完全沒反應」這一關。

多數時候，問題不是 CSS 寫錯方向，而是被別的東西擋在半路。附加的 CSS 指的是後台裡一個全站通用的 CSS 輸入框，寫進去的規則會套用到整個網站，而且理論上能蓋過佈景主題原本的樣式，不用動到主題檔案本身，是最輕量、也最不容易被主題更新洗掉的客製化方式之一。正因為輕量又不用碰程式碼檔案，很多人習慣把小改動都塞進這個欄位，一旦真的沒生效，快取沒清乾淨、選擇器優先權不夠、跟其他外掛打架，都會讓同一個症狀冒出來，原因卻完全不一樣。

先從附加的 CSS 是什麼、跟區塊層級的 CSS 類別怎麼區分講起，再一項一項拆解常見的沒生效原因，最後整理成一套排查順序，讓你照著走就能找到自己卡住的那一關。

附加的 CSS 是什麼？跟區塊層級的 CSS 類別有什麼差異？

附加的 CSS 是後台一個全站通用的 CSS 輸入框，不管你人在哪個頁面、哪篇文章寫下規則，都會套用到整個網站。它的載入順序排在佈景主題原本的 CSS 之後，所以理論上能蓋過主題內建的樣式，不需要動到主題檔案本身，也不怕主題更新的時候被覆蓋掉。

如果用的是傳統（經典）佈景主題，進入路徑是外觀→自訂→附加的 CSS，或直接從後台頂端管理列點「自訂」進去。如果用的是區塊主題，也就是靠網站編輯器管理整個版面的那種，從 WordPress 6.2 開始，附加的 CSS 搬了位置，改放進外觀→編輯器→樣式→右上角選單裡。同一個版本也新增了另一種寫法叫「逐區塊 CSS」，在樣式面板裡選定某個區塊類型，就能直接針對它寫 CSS，不用自己組選擇器，WordPress 會自動套用，而且是套用到全站所有同類型的區塊，不只是你當下選的那一個。

多數初學者真正卡住的地方，是把附加的 CSS 跟區塊「進階」設定裡的「附加的 CSS 類別」欄位搞混。後者只是幫這個區塊多加一個 class 名稱在 HTML 上，本身完全不含任何樣式，加了 class 名稱之後前台看起來還是原封不動，因為對應的 CSS 規則要你自己另外寫出來，而且得回到附加的 CSS 欄位（或前面提到的逐區塊 CSS）才會真正生效。不少人以為打了 class 名稱就會自動套用樣式，這正是「存了卻沒生效」最常見的誤會之一。

換了佈景主題，附加的 CSS 會不見嗎？

附加的 CSS 其實是綁在「目前使用中」的佈景主題上，不是綁在整個網站，所以一換成別的主題，原本寫的規則預設就不會沿用，前台看起來會像那些樣式整組消失，但規則本身沒有被刪除，只是暫時派不上用場；等哪天又換回原本那個主題，規則會重新生效，不用重寫一遍。這是新手很常見的疑問，順手在這裡一併回答，免得改版時誤以為 CSS 不見了要重寫。

附加的 CSS 選擇器怎麼寫，才抓得到你要改的元素？

附加的 CSS 明明寫了，前台卻沒反應，很多時候不是規則沒套用，而是選擇器本身沒抓對目標。與其憑印象猜一個 class 名稱，更可靠的做法是打開瀏覽器的開發者工具（在畫面上按右鍵選「檢查」，或直接按 F12），點選你想改的那個元素，右側面板就會列出它實際套用的 class 或 id，連同目前生效的樣式規則一起顯示出來。

抓對目標之後，還要懂 CSS 的「具體程度」（specificity）這個基本概念，才知道自己寫的規則有沒有機會贏過主題原本的樣式。根據 MDN（Mozilla 開發者網路）的說明，優先權由高到低大致分四層：寫在 HTML 元素上的 inline style 最高，接著是 id 選擇器，再來是類別、屬性、偽類選擇器，最後才是元素標籤本身和偽元素。同一個元素如果被兩條規則同時套用，瀏覽器會照這套順序決定哪一條贏，選擇器寫得越具體，優先權就越高。

這也是為什麼隨手在選擇器前面多包一層容器，比如加上頁面主要區塊的 class 當前綴，就能自然拉高優先權，不必動不動就丟一個!important上去解決。!important確實能救急，馬上讓某條規則優先套用，但它會直接反轉原本的層疊順序，之後如果又有另一條規則也加了!important，兩邊互相蓋來蓋去，排查起來會比一開始就沒用它更難懂。能靠調整選擇器解決的，就先別動用!important。

原因一：選擇器優先權不夠，被主題原本的 CSS 蓋過去

這是附加的 CSS「看起來沒生效」最常見的一種情況。CSS 本身確實套用了，只是輸給了佈景主題本身寫得更具體的選擇器，例如主題用了 id、或是疊了好幾層 class 去指定同一個元素，具體程度天生就比你隨手寫的一行還高。

舉個例子，如果佈景主題原本寫的是兩層 class 疊起來的選擇器，你在附加的 CSS 只寫一層 class，兩邊一比，你的規則自然會輸：

/* 主題原本的樣式,兩層class */
.site-header .btn {
  color: #333333;
}

/* 你在附加的CSS只寫了一層class,具體程度不夠,會輸 */
.btn {
  color: #1a73e8;
}

/* 把選擇器補得跟主題一樣長,甚至更長,才贏得過 */
.site-header .btn.btn-primary {
  color: #1a73e8;
}Code language: CSS (css)

判斷方法一樣靠開發者工具，點開你要改的元素，右側「樣式」面板就會列出所有套用到這個元素的 CSS 規則，依優先權排列。如果你寫的那條規則整行被劃了刪除線，代表它確實有被讀到，只是輸給了上面優先權更高的另一條規則，這時候該做的不是把樣式再貼一次，而是回頭調整選擇器，讓它比主題那條更具體，而不是遇到蓋不過就直接補一個!important了事。

原因二：瀏覽器或快取外掛，還在給你看舊版本

附加的 CSS 存檔的當下，其實已經真的寫進資料庫了，只是你畫面上看到的還是快取版本，跟資料庫裡最新的內容不同步。最單純的一層是瀏覽器本身的快取，強制重新整理（Windows 按 Ctrl+F5，Mac 按 Cmd+Shift+R）或直接開一個無痕視窗看，通常就能排除這一層。

另一層比較容易被忽略，是 WordPress 快取外掛的最佳化功能，尤其是「移除未使用 CSS」（Remove Unused CSS）這類功能。這類外掛會分析每個頁面實際用到哪些 CSS 規則，把它判定為「沒用到」的部分整段濾掉，藉此縮小前端載入的檔案體積，但它畢竟是自動判斷，偶爾會誤判附加的 CSS 裡某條規則在這個頁面「沒被用到」，連帶把它濾掉。以 WP Rocket 為例，官方文件建議的排查方式，是把要保留的 class、id 或字型加進 safelist 名單，確保這類最佳化不會動到它；也可以在網址後面加上?nowprocket參數，叫出一個略過最佳化的版本，跟平常看到的正常版本並排，用開發者工具比對兩邊的 CSS 差異，就能具體看出是不是這一層濾掉了你要的規則。

原因三：CDN 也存了一份快取，只清網站端不夠

如果網站前面還架了一層 CDN，例如 Cloudflare，CDN 會在自己的邊緣節點另外存一份頁面快取，跟 WordPress 本身的快取外掛完全是不同層。就算已經清過快取外掛的快取，也用無痕視窗排除了瀏覽器端的可能，畫面看起來還是舊的，很可能就是 CDN 那一層還沒清到。

CDN 後台通常都有「清除快取」（purge）的功能，常見的做法是清除全部或只清除單一網址。Cloudflare 官方文件把清除單一網址列為建議的優先做法，因為範圍小、生效速度也快，你只要針對剛改過的那個頁面清一次，就能很快確認是不是 CDN 快取造成的，不用每次都動用清除全部這種會連帶影響全站的做法。

原因四：頁面編輯器外掛跟附加的 CSS 互相打架

視覺化頁面編輯器，像 Elementor 這類，通常也會把頁面樣式另外編譯、快取成一份獨立的 CSS 檔案，跟附加的 CSS 走的是不同機制。你改完附加的 CSS，規則理論上已經生效，但編輯器產生的那份頁面樣式檔案可能還沒重新編譯，前台看起來就像什麼都沒變。

以 Elementor 為例，後台「Elementor」選單下的「工具」頁面，有一個「清除檔案與資料」的按鈕（舊版介面稱為「重新產生 CSS」），點下去就會強制重新編譯所有頁面樣式，通常能解決這種看似沒生效的狀況。另外要留意的是，如果同一個網站裝了不只一套頁面編輯器，兩邊的 CSS 很容易互相覆蓋，連原本正常的樣式都可能跑掉。比較穩妥的做法是只留一套頁面編輯器，其他不用的直接移除，而不是只停用，因為就算停用，殘留的 CSS 有時候還是會造成衝突。

原因五：語法漏了一個符號，後面的規則就整段失效

CSS 是逐條解析的，瀏覽器讀到哪裡就套用到哪裡，附加的 CSS 欄位裡如果漏打一個右大括號或一個分號，後面的規則往往會全部跟著跑位，有的整段失效，有的套用到不該套用的元素上。

比如漏打了一個右大括號：

.card-title {
  font-size: 20px;
  color: #1a73e8;

.card-desc {
  font-size: 14px;
}Code language: CSS (css)

少了.card-title規則結尾那個}，瀏覽器會把後面.card-desc整段都當成.card-title規則的一部分繼續解析，.card-desc原本該有的樣式反而套用不出來，而畫面上完全不會跳出任何錯誤訊息提醒你少了符號。這種狀況最容易讓人誤會成快取沒清乾淨或優先權不夠，排查了半天，問題其實只是少了一個符號。比較快的做法是把整段 CSS 貼到 CSS 語法檢查工具裡驗證一次，例如 W3C 的 CSS 驗證服務，能直接抓出成對符號有沒有漏寫，比自己一行一行盯著找快得多。

附加的 CSS 不生效時，怎麼一步步排查？

前面五個原因看起來各自獨立，實際排查時不用每一個都重新測一遍，照一套固定順序走，通常幾分鐘就能定位到問題出在哪一關。原則是先排除外部因素，再回頭看 CSS 本身：

1. 先把三層快取都清一次：瀏覽器快取（強制重新整理或開無痕視窗）、WordPress 快取外掛，以及 CDN（如果網站前面有架的話），尤其 CDN 最容易被漏掉。
2. 打開開發者工具，點選你要改的那個元素，檢查附加的 CSS 寫的那條規則，有沒有出現在它的樣式清單裡。
3. 完全沒出現：回頭檢查 CSS 語法有沒有漏符號，或是快取有沒有真的清乾淨，這兩個是最常見的「規則根本沒被讀到」的原因。
4. 有出現，但整行被劃了刪除線：代表規則有生效，只是優先權不夠被蓋過去了，這時候要做的是調整選擇器、拉高具體程度，而不是丟一個!important了事。
5. 前面四步都排除了，還是沒變：回頭檢查是不是把附加的 CSS 跟區塊層級的「附加的 CSS 類別」搞混了，或是網站用的頁面編輯器外掛跟附加的 CSS 打架，兩邊互相覆蓋。

附加的 CSS 看起來沒生效，多數時候不是 CSS 寫錯了方向，而是卡在快取、優先權，或是跟其他 CSS 功能搞混這三層裡的其中一層。抓對排查順序，遠比每次都把 CSS 整段重寫一遍，或是遇到問題就丟一個!important，更快解決問題。

這套先看快取、再看優先權、最後看語法與衝突的邏輯，不只適用於附加的 CSS。之後不管是在哪個欄位、哪個外掛裡寫 CSS，只要遇到明明寫了卻看起來沒反應的狀況，都可以照同一套順序一關一關排查下去。