HTML class 多類名寫法：空格分隔、樣式疊加、優先級規則全解析

語法規則

<header class="login-header head-bottom-line">...</header>

• 類名之間用**空格**分隔，可寫任意多個。
• 瀏覽器將其視為**類名列表**，元素同時屬於所有列出的類。

樣式疊加與優先級

1. **同權重後勝**：若多個類定義了相同 CSS 屬性，寫在後面的類生效（樣式表中順序）。
2. **優先級計算**：內聯 > ID > 類/屬性/偽類 > 標籤。同優先級看順序。
3. **!important** 可強制提升，但慎用。

實戰示例

.login-header { background: #fff; color: #333; }
.head-bottom-line { border-bottom: 1px solid #eee; color: #0066ff; } /* 覆蓋 color */

<header class="login-header head-bottom-line">標題</header>
<!-- 最終效果：白底、藍字、底部灰線 -->

開發建議

• **功能類** + **狀態類** 分離：class="btn btn-primary btn-disabled"。
• 使用 BEM 命名避免衝突：block__element--modifier。
• 開發工具（DevTools）可視化查看最終計算樣式與來源類。

多類名是 CSS 模組化的基石，**空格分隔、後勝前、優先級** 三大法則記心裡，樣式衝突不再愁！