類選擇器和id選擇器的區別

在CSS中，選擇器是指對特定的HTML元素應用樣式的方式。選擇器有不同的類型，其中最常見的是類選擇器和id選擇器。

一、類選擇器與id選擇器簡介

類選擇器和id選擇器是CSS中最常用的兩種選擇器，它們的作用是為HTML元素定義樣式。

1.1 類選擇器

  
   /* 定義一個類選擇器 */
   .className {
     property: value;
   }
  

類選擇器使用”.”作為前綴，後跟類的名稱，如「.className」。

1.2 id選擇器

  
   /* 定義一個id選擇器 */
   #idName {
     property: value;
   }
  

id選擇器使用「#」作為前綴，後跟id的名稱，如「#idName」。

二、類選擇器和id選擇器的區別

2.1 選擇器的使用場景

類選擇器適用於需要為一組HTML元素定義樣式的情況，而且這些元素可以出現在多個地方，應用同樣的樣式，如以下代碼：

  
   /* 定義一個類選擇器 */
   .className {
     property: value;
   }
   
   /* 為多個元素添加類名 */
   <div class="className">...</div>
   <p class="className">...</p>
  

id選擇器適用於需要為一個HTML元素定義樣式的情況，因為id是唯一的，一個HTML元素只能擁有一個id，如以下代碼：

  
   /* 定義一個id選擇器 */
   #idName {
     property: value;
   }
   
   /* 為一個元素添加id */
   <div id="idName">...</div>
  

2.2 選擇器的權重

當多個樣式規則同時應用於同一個HTML元素時，CSS會根據選擇器的權重來確定哪個樣式規則最終生效，其中id選擇器的權重最高，類選擇器的權重次之。

具體來說，CSS會根據選擇器中id選擇器的個數、類選擇器的個數、元素選擇器的個數以及其他選擇器的個數來計算選擇器的權重，計算公式如下：

  
   選擇器的權重 = a × 100 + b × 10 + c × 1
  

其中，a表示id選擇器的個數，b表示類選擇器和屬性選擇器的個數，c表示元素選擇器和偽元素選擇器的個數。

因此，當一個id選擇器和一個類選擇器同時應用於同一個HTML元素時，id選擇器的樣式規則會覆蓋類選擇器的樣式規則，即id選擇器的樣式會生效。

2.3 選擇器的使用方式

類選擇器可以被多次使用，而且一個HTML元素可以擁有多個類名，這樣就可以將不同的樣式應用於同一個元素，如以下代碼：

  
   /* 定義多個類選擇器 */
   .classA {
     property: value1;
   }
   
   .classB {
     property: value2;
   }
   
   /* 為一個元素添加多個類名 */
   <div class="classA classB">...</div>
  

id選擇器只能被使用一次，每個HTML元素只能擁有一個id，如果多個元素共用一個id，則只會有第一個被應用，如以下代碼：

  
   /* 定義一個id選擇器 */
   #idName {
     property: value;
   }
   
   /* 為多個元素添加相同的id */
   <div id="idName">...</div>
   <p id="idName">...</p>
  

三、總結

類選擇器和id選擇器是CSS中最常用的兩種選擇器，它們在選擇器的使用場景、權重、使用方式等方面存在著明顯的差別，可以根據實際需求進行選擇。