CSS 選擇器 # 與 . 含義詳解：ID 與 Class 的區別

問題背景

初學者在閱讀 CSS 代碼時，常見 #tbheadlogo、.tdheadnavcur 等選擇器，不確定 # 和 . 分別代表什麼，以及它們對應網頁的哪一部分。

核心概念

• # 開頭（ID 選擇器）：對應 HTML 元素的 id 屬性。
  例如 #tbheadlogo 對應 <div id="tbheadlogo">。
  ID 在頁面中唯一，權重最高。
• . 開頭（Class 選擇器）：對應 HTML 元素的 class 屬性。
  例如 .tdheadnavcur 對應 <div class="tdheadnavcur">。
  Class 可重複使用，權重較低。
• 無前綴（標籤選擇器）：直接針對 HTML 標籤，如 a、li。

代碼示例解析

#tbheadlogo { border-bottom: #FB6204 2px solid; background-color: #FFF; }
.tdheadnavcur { background: url(../images/navbgcur.jpg) repeat-x; color: #FFF; }

第一條規則套用到 id="tbheadlogo" 的元素；第二條套用到所有 class="tdheadnavcur" 的元素。

常見屬性說明

• border-bottom：底部邊框樣式
• background-color / background：背景顏色或圖片
• color：文字顏色
• padding、margin：內外邊距
• font-weight、font-size：字體粗細與大小
• :hover：滑鼠懸停偽類

建議

善用瀏覽器開發者工具（F12）檢查元素，查看實際套用的 CSS 規則，能快速理解選擇器與頁面結構的對應關係。