CSS 媒體查詢未閉合導致後續樣式遭吞噬排查

整理日期：2026-04-19

狀況

在「外觀 > 自訂 > 附加的 CSS」中貼入了用來修正側邊欄小工具項目符號的 CSS 程式碼。但在前端測試時，發現該樣式僅在手機版（窄螢幕）下生效，在電腦版（寬螢幕）下完全沒有作用。經查，該 CSS 規則並無包裹在任何媒體查詢（Media Query）中。

---

先拆成幾層看

• 瀏覽器層：使用 DevTools 檢查該側邊欄元素在電腦版上的 Computed Styles，確認是否有該 CSS 宣告。如果完全沒有，代表樣式根本沒被瀏覽器解析，或被其他規則排除。
• 原始碼檢視：直接抓取網頁產生的 <style id="wp-custom-css"> 內聯樣式表，數一下大括號 { 與 } 的數量是否平衡。
• 語法結構：確認附加 CSS 檔案中，前面的樣式宣告是否有語法錯誤（例如未閉合的括號）。

---

最後發現

問題源於附加 CSS 檔案中，前人留下的程式碼包含了三個未正確閉合的媒體查詢（@media (max-width: 544px) {）。

由於缺乏閉合大括號 }，瀏覽器在解析 CSS 時，會將後續所有的 CSS 規則（包含我們新貼入的側邊欄樣式）全部「吞」進去，判定為最內層 @media (max-width: 544px) 的一部分。因此，這些樣式只有在視窗寬度小於等於 544px 時才會生效，電腦版則完全被忽略。

---

修正方式

必須整理附加 CSS 中所有混亂的媒體查詢，將其改為平行的獨立開關結構，並將全域通用的樣式移出媒體查詢之外（放在最外層）：

修改前（混亂且嵌套的結構）

/*-- 產品內頁描述樣式 --*/
div#tab-description h1 { font-size: 16.5px; }
@media(max-width:544px){
  div#tab-description h1 { font-size: 15.5px!important; }
  div#tab-description h2 { font-size: 16.5px; }
  @media(max-width:544px){
    div#tab-description h2 { font-size: 15px!important; }
    /*-- 文章內頁樣式 --*/
    @media(max-width:544px){
      .entry-content h1 { font-size: 15px!important; }
      .entry-content h2 { font-size: 16px; }
      @media(max-width:544px){
        .entry-content h2 { font-size: 15px!important; }
        /* 側邊欄樣式被意外包在 4 層 media query 裡面 */
        .widget_recent_entries ul { list-style: disc !important; }
      }
    }
  }
}

修改後（扁平且正確閉合的結構）

/* 1. 全域樣式（無媒體查詢包裝，全視窗尺寸生效） */
div#tab-description h1 { font-size: 16.5px; }
div#tab-description h2 { font-size: 16.5px; }
.entry-content h2 { font-size: 16px; }

/* 側邊欄「最新文章」小工具 — 全域加回項目符號 */
.widget_recent_entries ul {
    list-style: disc !important;
    padding-left: 1.25em !important;
    margin-left: 0;
}
.widget_recent_entries ul li {
    list-style: disc !important;
    margin-bottom: 0.5em;
}

/* 2. 行動版專用樣式（獨立且正確閉合） */
@media(max-width:544px){
    div#tab-description h1 { font-size: 15.5px!important; }
    div#tab-description h2 { font-size: 15px!important; }
    .entry-content h1 { font-size: 15px!important; }
    .entry-content h2 { font-size: 15px!important; }
}

---

不建議先做的事

• 不要因為電腦版沒生效，就盲目在新增的 CSS 規則中加上 @media (min-width: 545px) { ... }。這只會讓語法更混亂，且治標不治本，底層括號未閉合的問題依舊存在。
• 不要將大量 CSS 寫在單一長行中，這會極度增加排查括號配對的難度。

---

下次遇到可以先整理什麼

• 發生樣式失效時，可以先將新加入的 CSS 程式碼搬移到「附加的 CSS」最頂端（第一行）。如果搬到最頂端後電腦版立刻生效，代表後面有其他未閉合的 @media 或 { 在干擾。
• 在本地端編輯器（如 VS Code）中打開整段 CSS，語法檢查器會自動標示括號配對錯誤的行數。

---

標籤

• CSS
• 媒體查詢
• 自訂CSS
• 排查
• Gutenberg