在 html 和 css 中，類和 id 是兩個(gè)最常使用的選擇器。雖然在功能上它們非常相似，但是它們之間還是存在著一些不同之處。

1. 命名不同

<div class="box">
</div>
<div id="container">
</div>

類和 id 之間的最明顯的區(qū)別就在于它們的命名方式，類選擇器使用類名稱，而 ID 選擇器則使用 Id 名稱作為標(biāo)識(shí)。

2. 作用范圍區(qū)別

類選擇器（class）適用于一組元素，而 ID 選擇器（id）只能應(yīng)用于一個(gè)元素。

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div id="container">container</div>
.box {
/* class 選擇器作用于所有的類 box*/
background-color: yellow;
}
#container {
/* id 選擇器只對(duì)此元素中的 container 有效*/
background-color: green;
}

3. 權(quán)重不同

在權(quán)重方面，ID 選擇器要比類選擇器具有更高的優(yōu)先級(jí)。這意味著使用 ID 選擇器可以更改已設(shè)置了類樣式的元素的樣式。

<div class="box">box1</div>
<div class="box" id="box2">box2</div> 
/* 當(dāng) id 選擇器和類選擇器同時(shí)應(yīng)用于元素時(shí)，CSS 樣式中 id 選擇器的優(yōu)先級(jí)會(huì)高于類選擇器 */
#box2 {
background-color: pink;
}
.box {
background-color: yellow;
}

總結(jié)：

ID 選擇器只能作用于一個(gè) HTML 元素，類選擇器可以一次作用于多個(gè) HTML 元素。ID 選擇器具有更高的優(yōu)先級(jí)，而類選擇器可以通過(guò)組合應(yīng)用降低選擇器的權(quán)重，并使其支持重用。