ID和Class有什么区别？

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

【ID和Class有什么区别？】

一、背景介绍 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

七、参考文献 CSS 的 ID 和 Class 有什么区别

八、更多讨论 1、id和class有什么区别 class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名 id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称 class可以重复，id是唯一的 2、id和class的优先级 通过继承来的属性id的优先级高于class 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！ 3、什么是id？什么是class？ id：从语义上来说，id是identity（ai’dentiti）的简写，identity是身份的意思，比如我们的身份证就叫做id-card。 在html中，id是设置标签的标识，使用方法 #id名称{样式声明} document.getElementById(“id名称”) $("#id名称") class：从语义上来说，class是类别的意思，他表示的是具有共同特点的东西，比如我们说我们是一类人，就是说我们有相同的特点。 在html中，我们用class为标签设定一个可以复用的标识，具有同样class的标签就会有相同的特点： class名称{样式声明} document.getElementsByClassName(“class名称”) $(".class名称")