id用於唯一標(biāo)識(shí)元素，如導(dǎo)航欄、頁腳；class用於可複用樣式，如按鈕、狀態(tài)切換。 1.id必須唯一，適合錨點(diǎn)定位和JavaScript精確操作；2.class可多元素使用，支持多選和組合，適合組件化設(shè)計(jì)；3.CSS中id優(yōu)先級高於class；4.佈局用id，交互邏輯用class；5.命名應(yīng)清晰有語義，避免濫用或模糊描述。

在網(wǎng)頁開發(fā)中， class和id是HTML 中最常用的兩個(gè)屬性，用於給元素添加標(biāo)識(shí)，方便CSS 樣式控制和JavaScript 操作。它們看起來很像，但用途和規(guī)則卻不同。簡單來說：一個(gè)id 代表唯一標(biāo)識(shí)，一個(gè)class 可以重複使用。

什麼時(shí)候用id？

id的最大特點(diǎn)是“唯一性”——頁面中不能有兩個(gè)相同的id。這使得它非常適合用來標(biāo)識(shí)頁面中獨(dú)一無二的結(jié)構(gòu)或組件。

常見使用場景包括：

• 頁面主標(biāo)題、導(dǎo)航欄、頁腳等全局元素
• 需要通過錨點(diǎn)跳轉(zhuǎn)定位的位置（比如<a href="#section1"></a> ）
• JavaScript 中需要精確操作的某個(gè)特定元素

例如：

 <div id="main-header">這是網(wǎng)站的主標(biāo)題</div>

注意幾點(diǎn)：

• id 名必須唯一
• 命名建議清晰有語義，如#sidebar 、 #user-profile
• 不要濫用id 來寫樣式，因?yàn)檠}用性差

什麼時(shí)候用class？

class的優(yōu)勢在於“可複用性”。同一個(gè)class 可以應(yīng)用在多個(gè)元素上，是做樣式複用和組件化設(shè)計(jì)的關(guān)鍵。

適合使用的場合包括：

• 多個(gè)元素共享相同樣式（如按鈕、卡片）
• 需要根據(jù)狀態(tài)切換樣式的元素（如.active 、 .hidden ）
• 組件化的前端框架中（如React、Vue）

例如：

 <button class="btn">提交</button>
<button class="btn">取消</button>

一些小技巧：

• class 可以有多個(gè)，用空格分隔，比如<div class="card featured"> <li> class 名建議簡潔清晰，避免過長或模糊的命名</li> <li>使用BEM 等命名規(guī)範(fàn)有助於維護(hù)大型項(xiàng)目</li> <hr> <h3 id="id-和class-在CSS-和JS-中的區(qū)別">id 和class 在CSS 和JS 中的區(qū)別</h3> <p>從功能上看，兩者都能被CSS 和JavaScript 訪問，但在使用方式和優(yōu)先級上有差異。</p> <p> CSS 層面：</p> <ul> <li> id 選擇器優(yōu)先級高於class（這意味著如果衝突，id 的樣式更可能生效）</li> <li> class 支持多選，可以組合使用，而id 只能有一個(gè)</li> </ul> <p>JavaScript 層面：</p> <ul> <li>獲取id 元素用<code>document.getElementById('xxx')
• 獲取class 元素用document.getElementsByClassName()或document.querySelectorAll('.xxx')
• id 更適合直接定位單一元素，class 更適合批量處理

實(shí)際開發(fā)中的使用建議

實(shí)際寫代碼時(shí)，如何取捨id 和class？這裡有幾個(gè)實(shí)用建議：

• 佈局結(jié)構(gòu)用id，樣式組件用class
  比如頁面容器可以用#container ，但按鈕統(tǒng)一用.btn

• 避免過度使用id 寫樣式
  因?yàn)閕d 的優(yōu)先級高，容易導(dǎo)致樣式覆蓋問題，調(diào)試麻煩

• 動(dòng)態(tài)交互邏輯優(yōu)先考慮class
  比如切換菜單展開收起，用classList.toggle()操作class 更靈活

• 保持語義清晰，命名有意義
  不要用.red或.big這種描述樣式的類名，應(yīng)該用.error-message或.highlight這樣的語義名

基本上就這些。 class 和id 各有其位，理解清楚它們的差異，才能寫出更清晰、易維護(hù)的HTML 結(jié)構(gòu)和樣式邏輯。