【修真院web小课堂】ID和class有什么区别？

大家好，我是IT修真院武汉分院web第16期的学员孟晨，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网js（职业）任务一，深度思考中的知识点——ID和class有什么区别？

1.背景介绍

什么是选择器？

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

HTML页面中的元素就是通过CSS选择器进行控制的。

选择器的种类

1 类别选择器
2 标签选择器
3 ID选择器
4 后代选择器
5 子选择器
6 伪类选择器
7 通用选择器
8 群组选择器
9 相邻同胞选择器
10 属性选择器
11 伪元素选择器
12 结构性伪类选择器
13 UI元素状态伪类选择器

今天我给大家讲的就是类(class)选择器和id选择器。

2.知识剖析

class类选择器

类选择器，用在对文档要应用样式，而不考虑具体涉及的元素时，首先对文档进行标记，输入class属性并且指定一个值，在使用的时候只要在值的前面加上（.）级可以使用这个类选择器。

注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）

id选择器

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id=”ID名称”，而不是class=”类名称”。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次.

尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。

然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。

3.常见问题

1.ID和CLASS的区别

2.ID和CLASS的优先级

3.同一页面使用相同的ID会怎样

4.解决方案

1.ID和CLASS的区别

相同点：可以应用于任何元素

不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

在一般情况下：
我们利用class来为元素添加样式—-css
我们利用id来为元素添加行为—-js/jQuery

2.ID和CLASS的优先级

权重计算规则
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

3.同一页面使用相同的ID会怎样

前面讲过，虽然id具有唯一性，但在css中id与class表现相同，同样都可以设置样式。当然这种方法是不值得提倡的。