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

1. 命名不同

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

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

2. 作用范圍區別

類選擇器（class）適用于一組元素，而 ID 選擇器（id）只能應用于一個元素。

<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 選擇器只對此元素中的 container 有效*/
background-color: green;
}

3. 權重不同

在權重方面，ID 選擇器要比類選擇器具有更高的優先級。這意味著使用 ID 選擇器可以更改已設置了類樣式的元素的樣式。

<div class="box">box1</div>
<div class="box" id="box2">box2</div> 
/* 當 id 選擇器和類選擇器同時應用于元素時，CSS 樣式中 id 選擇器的優先級會高于類選擇器 */
#box2 {
background-color: pink;
}
.box {
background-color: yellow;
}

總結：

ID 選擇器只能作用于一個 HTML 元素，類選擇器可以一次作用于多個 HTML 元素。ID 選擇器具有更高的優先級，而類選擇器可以通過組合應用降低選擇器的權重，并使其支持重用。