類選擇器通過.符號定義，如.highlight，可為多個元素應用相同樣式；class屬性不僅用于css樣式，還可被JavaScript操作、框架動態綁定及語義標記；元素可同時擁有多個類，順序不影響優先級但建議基礎類在前；命名應有意義，避免隨意縮寫。
在網頁開發中，html 的類選擇器（class selector）和 class 屬性是實現樣式控制與結構分離的關鍵工具。它們讓開發者可以靈活地為多個元素應用相同的樣式或行為，而不必重復代碼。
類選擇器的基本用法
類選擇器通過 . 符號來定義，后面緊跟類名。例如 .highlight 就是一個類選擇器，它會選擇所有具有 class=”highlight” 的 HTML 元素。你可以把它用在 css 中，像這樣：
.highlight { background-color: yellow; }
這樣寫之后，所有帶有 class=”highlight” 的元素都會擁有黃色背景。類選擇器不局限于某一種標簽類型，同一個類可以作用于
、
、 等任意標簽。
立即學習“前端免費學習筆記（深入）”；
class 屬性的作用不只是樣式控制
雖然最常見的用途是配合 CSS 設置樣式，但 class 屬性的用途其實更廣泛。它還可以：
- 被 JavaScript 用來查找和操作特定元素，比如通過 document.querySelectorAll(‘.highlight’)
- 在框架（如 React、vue）中用于動態綁定樣式或組件狀態
- 作為語義標記，幫助理解 HTML 結構，比如常見的命名如 .nav、.footer、.card
因此，class 是連接 HTML、CSS 和 JavaScript 的重要橋梁。
多個類怎么寫？順序有沒有影響？
一個元素可以同時擁有多個類，只需在 class 屬性中用空格分隔即可。例如：
<div class="box warning"></div>
這個
同時屬于 box 和 warning 兩個類。這種寫法非常實用，尤其是當你想復用一些通用樣式（如 box）再加上一個修飾類（如 warning）來改變外觀時。
至于類的順序，一般來說不影響樣式優先級，真正決定優先級的是 CSS 中的規則順序和特異性。不過為了可讀性，建議把基礎類放前面，修飾類放后面。
類名命名建議：別亂起名字
給類起名字看起來簡單，但如果不注意，很容易造成混亂。推薦遵循以下幾點：
- 使用有意義的名字，比如 .btn-primary 比 .blue 更好，因為它表達了用途而不是顏色
- 避免使用縮寫或拼音，除非團隊有統一規范
- 可以參考 BEM（Block Element Modifier）風格，比如 .menu__item–active，有助于組織結構清晰的樣式表
這些做法雖然不是強制要求，但能大大提升項目的可維護性。
基本上就這些了。類選擇器和 class 屬性用起來不復雜，但在實際開發中特別常用，掌握好細節能讓你寫出來的代碼更整潔、更容易協作。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
