类选择器和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中最常用的两种选择器，它们在选择器的使用场景、权重、使用方式等方面存在着明显的差别，可以根据实际需求进行选择。