側邊欄最新文章項目符號遺失與 CSS 優先權覆蓋

整理日期：2026-03-27

狀況

在網站上新增「最新文章」小工具到側邊欄後，清單的項目符號（圓點）完全沒有顯示，導致多篇文章標題緊貼在一起，行距過密，訪客極難區分不同的文章標題。

---

先拆成幾層看

• 檢查側邊欄的 HTML 結構，確認是否仍使用標準的 <ul> 與 <li> 標籤。
• 使用瀏覽器開發者工具（DevTools）檢查 computed styles，找出是哪一個 CSS 規則將 list-style 或 list-style-type 設為 none。
• 檢查這些 reset 樣式是來自 WordPress 核心、佈景主題（如 Astra/GeneratePress），還是特定外掛。

---

最後發現

許多現代佈景主題（例如 Astra）為了保證版面一致性，會在全站的樣式重設（Reset）或小工具樣式中，強制宣告 .widget ul { list-style: none; padding-left: 0; }。

由於該重設規則的權限較高，即使在 HTML 結構中是標準的列表，前台依然不會顯示項目符號。要將其加回，必須使用比主題更具體的選擇器，並搭配 !important 提高權限層級。

---

修正方式

在「外觀 > 自訂 > 附加的 CSS」中加入以下 CSS 樣式規則，覆蓋主題的 CSS 重設：

/* 側邊欄「最新文章」小工具 — 加回項目符號與縮排 */
.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;
}

---

不建議先做的事

• 不要為了顯示項目符號而去修改小工具的原始 PHP 結構，或是試圖用 JavaScript 在網頁載入後動態插入點號，這會讓維護工作變得非常繁雜。
• 避免直接在全站的 ul 標籤上套用全域修改，這會破壞選單、頁首或頁尾等其他不該出現圓點的導覽區塊。

---

下次遇到可以先整理什麼

• 出現問題的側邊欄小工具之 CSS Class 名稱（例如 .widget_recent_entries）。
• 主題預設針對側邊欄小工具的列表縮排值（padding-left 或 margin-left）。
• 是否有使用快取外掛或 CDN（如 Cloudflare / Varnish），修改 CSS 後必須清除快取才能驗證結果。

---

標籤

• CSS
• 側邊欄
• Astra
• 樣式重設
• list-style