ID与CLASS的区别

1.背景介绍

HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选 择器和类选择器。

2.知识剖析

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。 

id 选择器和派生选择器 在现代布局中，id 选择器常常用于建立派生选择器。

一个选择器，多种用法 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次

单独的选择器 id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用 

ID是一个标签，用于区分不同结构和内容，就好像两个同样名字的人在无屋子里面，就会发生混淆，从概念上面来说ID是先找到结构/内容，再给它定义样式的

class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。 class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。 class前面前缀“.”，class可以多次使用 通过document.getElementsByClassName('ClassName')获取; class 不兼容IE6,7,8 class,是一个样式，可以套用在任何结构和内容上面。就像一件衣服，class是先定义好一种样式，在套多个结构/内容 id是一对一的，class是一对多的，id只能调用一次，class可以重复调用。id的权值也要大于class， 类的灵活性是非常强大的，但是有些新手会过度使用或滥用。css新手几乎在所有的东西上面都加上类，从而师徒更加精确地控制 他们的样式。

3.常见问题

ID和CLASS的优先级

4.解决方案

通过继承来的属性 id 的优先级高于 class CSS的优先级顺序: tag中的style > id > class > 继承的属性 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

总结

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

3.常见问题

总结

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

5.编码实战

6.扩展思考

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

7.参考文献

参考一：w3c

参考二：知乎

8.更多讨论

如何正确使用ID和CLASS？

问题：

1.同一个页面使用相同的ID会怎么样？

答：不能通过w3迟到校验。在页面显示上，目前的浏览器HIA都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。单当你需要用js通过id来控制这个id，那就会出现错误。

2.如何正确使用ID和CLASS？

答：css只用class来写并有专门的class通用和私有模块命名，id具有唯一性且优先级太高只作为j操作dom的挂钩全部不添加样式，如果使用jp或zepto的话， 操作的class类名一般也不加样式，镇部分的class命名和id一样js来制定。这样桌比较合适大型，多人维护而且需要长期达代的项目css的class类名和js操作id、class类完全分离，这样产品的ui或者产品交互逻辑变动二者互不影响，易维护。

3.ID和CLASS的优先级

答：通过继承来的属性 id 的优先级高于 class CSS的优先级顺序: tag中的style > id > class > 继承的属性 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！