1.背景介绍

选择器的种类

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

今天我们就来讲一讲类选择器和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表现相同，同样都可以设置样式。当然这种方法是不值得提倡的。

而在js中，它只会选择具有相同id名字元素中的第一个。

5.编码实战

6.扩展思考

JS获取的DOM与JQurey获取的有什么区别

原生js获取：
id: document.getElementById('#id')
class： document.getElementsByClassName(".class")

jQuery获取：
id: $('#id')
class: $('.class')

7.参考文献

8.更多讨论