大家好，我是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表现相同，同样都可以设置样式。当然这种方法是不值得提倡的。
而在js中，它只会选择具有相同id名字元素中的第一个。
5.编码实战
在css中的例子，注意红框里的id，都是一样全部样式都改变了
然后是在js里的例子，因为还是利用刚刚的样式就不截图html的结构了
可以看到，我使用js改变样式，只有第一个id变颜色了
然后是id和class的优先级
还是用刚刚的例子，红色框和灰色框，可以看到id和class共存时id要优先于class的
6.扩展思考
JS获取的DOM使用id和使用class改变样式时有什么区别？
首先是js获取dom方式：
id: document.getElementById(‘#id’)
class： document.getElementsByClassName(“.class”)
这里我们是改变颜色
id: document.getElementById(‘#id’).style.backgroundColor = “颜色”;
class: document.getElementsByClassName(“.class”)[指定数组第几个].style.backgroundColor = “颜色”;
7.参考文献
https://baike.baidu.com/item/css%E9%80%89%E6%8B%A9%E5%99%A8/2819686
https://blog.csdn.net/coder_chang/article/details/72777943
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
8.更多讨论
今天的分享就到这里啦，下面链接为修真院的链接感兴趣的童鞋可以注册看看
http://www.jnshu.com/login/1/25438437
欢迎大家点赞、转发、留言、拍砖~