如何找出網頁裡的 CSS Class Name (名稱) 和 ID Selector (選擇器)？

這篇文章最後更新日期：2024 年 4 月 1 日 | 作者： Mack Chan

這篇教學是網站架設的基本功之一，協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。這是一個非常重要的「起手式」，在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱。

不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會，我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具，讓新手快速進入學習的狀態。

---

Chrome DevTools (開發人員工具) 是什麼？

Chrome DevTools 提供一系列協助網站站長研究網站的工具，這內建在 Google Chrome 瀏覽器，而且是免費和無條件就可以下載使用。不過當中大部分工具是需要一定的技術門欖，所以比較適合進階操作和資深的站長使用。

---

方法一：不同平台常用快捷鍵參考

不少站長常說的按 Chrome F12 去查找網頁資料就是這個由來，加上 Chrome 的市場佔有率又是最高的代表，F12 變成了一個標誌性的代名詞。

• Mac：Command + Option + I
• Windows / Linux：F12 (Control + Shift + I)

---

方法二：從 [右鍵] 清單中選出 [檢查 / Inspect]

打開 Chrome 瀏覽器，在你希望查詢的網頁的地方，按滑鼠的 [右鍵] → [檢查 / Inspect]，這也跟按下鍵盤的 F12 有相同的效果。

---

Chrome DevTools 開發者工具介面

Chrome DevTools 開發者工具提供很多功能，不過我們這次教學只會聚焦在如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)，這個功能不太顯眼，就是有個「黑色箭頭」的外觀就是了，這個功能名是 [檢查圖示 / Inspect Icon]。

---

[檢查圖示 / Inspect Icon] 的功用

這個是最常用的功能之一，點擊一下就能啟用，然後我們回到網頁的畫面。

---

找出網頁裡的 CSS Class Name (名稱) 三步曲

步驟一：
點擊目標的網頁元素，例如標題、段落或圖片。

步驟二：
在彈出視窗裡的可以發現 CSS Class Name (名稱) 字串。

步驟三：
把 CSS Class Name (名稱) 複制起來備用。

---

在右邊的 [元素 Elements] 裡 [樣式 Style] 面板設定

例如案例裡的 .site-title 這個 CSS 名稱，就可以點擊後複制起來。

---

在允許你修改 CSS 的地上貼上

在 WordPress 網站後台裡，[控制台] → [外觀] → [附加的 CSS] 可以找到讓你調整 CSS 的地方，當然不限於這個地方。這篇教學到此為止，初學者只需要懂得找出這個 CSS Class Name (名稱) 就可以在將來很多教學裡應用。

---

常見問題 FAQ

---

參考資料和引用文獻：

• WordPress: An Intro to CSS: Finding CSS Selectors
• Google Chrome DevTools – Chrome Developers
• Open Chrome DevTools
• Google Chrome：Google 打造的瀏覽器
• CSS 選擇器 – 術語表 | MDN
• ID 选择器 – CSS（层叠样式表） | MDN
• 維基百科：什麼是 CSS (階層式樣式表)？
• 網站迷谷：區塊編輯器
• 網站迷谷：傳統編輯器

---

WordPress 學員人數
12,000+ 人 (持續增加之中)