【萌新分院】id与class的区别？

分享人：王寒

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

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

2.知识剖析

什么是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？

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

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

            
           

            .class名称{样式声明}
            document.getElementsByClassName("class名称")
            $(".class名称")
            
            

class的作用

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

3.常见问题

1.ID和class的区别

2.ID和class的优先级

3.同一页面使用相同的id会怎样

4.解决方案

1.ID和class的区别

id是一个标签，用于区分不同的结构和内容，就像人的名字，如果一个房间内有2个人同名，在老师点名的时就会出现混淆； class是一个样式，可以用在任何结构和内容上，就像一件衣服；

2.ID和class的优先级

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

CSS的优先级顺序: tag中的style > id > class > 继承的属性

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

3.同一页面使用相同的id会怎样

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

总结

在一般情况下：

我们利用class来为元素添加样式----css

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

5.编码实战

7.参考文献

参考一：html中，id属性和class属性有什么区别？

参考二： CSS样式id和class属性优先级问题

参考三：CSS 的 ID 和 Class 有什么区别？如何正确使用它们？

参考四：CSS选择器优先级及!important属性

8.更多讨论

如何正确使用ID和Class？

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

感谢观看

BY：王寒