小课堂【萌新】

【CSS】ID和CLASS有什么区别？

分享人：计翔于

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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

5、编码实战

6.扩展思考

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

7.参考文献

参考一：w3c

参考二：知乎

8、更多讨论

如何正确使用ID和CLASS？

鸣谢

感谢大家观看

BY : 计翔于