fbpx
了解 Elementor 編輯器最新優惠

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

這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱)Id Selector (選擇器)。這是一個非常重要的「起手式」,在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱,不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會,我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具,讓新手快速進入學習的狀態。

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

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

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

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

不同平台常用快捷鍵參考
不同平台常用快捷鍵參考

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

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

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

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

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

Chrome DevTools 開發者工具介面

Chrome DevTools 開發者工具介面
Chrome DevTools 開發者工具介面

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

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

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

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

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

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

步驟一:

點擊目標的網頁元素,例如標題、段落或圖片。

步驟二:

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

步驟三:

把 CSS Class Name (名稱) 複制起來備用。

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

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

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

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

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

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

常見問題 FAQ

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

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

不同平台常用快捷鍵參考

不少站長常說的按 Chrome F12 去查找網頁資料就是這個由來,加上 Chrome 的市場佔有率又是最高的代表,F12 變成了一個標誌性的代名詞。
Mac:Command + Option + I
Windows / Linux:F12 (Control + Shift + I)

參考資料和引用文獻:

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:7,800+ 人 (持續增加之中)

中文語系的 WordPress - Facebook 社團列表

在〈如何找出網頁裡的 CSS Class Name (名稱) 和 ID Selector (選擇器)?〉中有 4 則留言

發表您的留言

加入我們的免費 WordPress 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術