ID和Class有什么区别

分享人：周能

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一、背景介绍

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

HTML页面中的元素就是通过CSS选择器进行控制的。本次讲的id和Class就是id选择器和类选择器。

二、知识剖析

什么是ID

从语义上来说，id是identity（ai'dentiti）的简写，identity是身份的意思，比如我们的身份证就叫做id-card。

在html中，id是设置标签的标识，使用方法

#id名称{样式声明}

document.getElementById("id名称")

$("#id名称")

ID的作用

id属性规定HTML元素的唯一的id。

id在HTML文档中必须是唯一的。

id属性可用作链接锚（link anchor），通过JavaScript（HTML DOM）或通过CSS为带有指定id的元素改变或添加样式

什么是class

从语义上来说，class是类别的意思，他表示的是具有共同特点的东西，比如我们说我们是一类人，就是说我们有相同的特点。

在html中，我们用class为标签设定一个可以复用的标识，具有同样class的标签就会有相同的特点：

class名称{样式声明}

document.getElementsByClassName("class名称")

$(".class名称")

class的作用

在css中，用class来定义那些可复用的样式，然后可以套给多个结构/内容。

在JS中，获取到的class将是一个数组，在使用的时候要特别注意！

三、常见问题

ID和class的区别

ID和class的优先级

四、解决方案

ID和class的区别

class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名

id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称

class可以重复，id是唯一的

ID和class的优先级

通过继承来的属性id的优先级高于class

一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

五、编码实战

六、拓展思考

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

利用id来为元素添加行为----js/jQuery

七、参考文献

八、更多讨论

鸣谢

感谢大家观看

BY : 周能