CSS 類別選取器 .：可重複使用的樣式單位

描述用途而不是外觀。取名為紅色文字的類別，日後改成藍色就會前後矛盾；取名為警告訊息才禁得起改版。

使用 . 符號選取 HTML 文件上具有特定類別的元素（在該屬性內，可套用多個類別），且類別名稱的大、小寫必須相符。

以下案例便是利用 類別選取器 將對象選取出來並進行樣式的改變。

小提醒

CSS 的模組化就是靠著套用多個類別來完成。

可以同時套用多個

html

<button class="btn btn-primary btn-lg">送出</button>

css

.btn { padding: 8px 16px; border-radius: 4px; }
.btn-primary { background: #2965f1; color: #fff; }
.btn-lg { font-size: 1.125rem; }

把樣式拆成 基底 + 變化 + 尺寸 三個小單位再組合，同一組 CSS 就能拼出各種按鈕。寫在 HTML 上的類別順序不影響結果，真正決定勝負的是權重與書寫順序。

css

/* ❌ 描述外觀，改版後名實不符 */
.red-text { color: #dc2626; }

/* ✅ 描述用途，換顏色也不用改名 */
.alert-message { color: #dc2626; }

小提醒

把命名規則系統化之後就是 CSS 模組化，最廣泛採用的一套是 BEM。

一個元素可以套用幾個類別？

沒有限制。用空白分隔即可，元素會同時取得所有類別的樣式。這正是把樣式拆成小單位再組合起來的基礎。

多個類別的先後順序有差嗎？

寫在 HTML 上的順序沒有影響。真正決定勝負的是樣式表中的權重與書寫順序，權重相同時後面寫的那條勝出。

類別名稱該怎麼取？

描述用途而不是外觀。取名為 紅色文字 的類別，日後改成藍色就會前後矛盾；取名為 警告訊息 才禁得起改版。

為什麼實務上偏好用類別？

權重適中、可重複使用、也能多重套用，既好覆蓋又能組合。元素選取器範圍太廣、ID 權重太高，都不適合當主力。