div 中 id 和 class使用详解【转】

原文地址:https://blog.csdn.net/zxw136511485/article/details/71191053

在div 标签中,我们比较常见的属性是id 和class,那么这两个属性有什么区别吗?今天就来看看这两者的区别。其实id 和class是大部分标签都有的属性。其作用是让CSS或者JavaScript找到DOM元素并操作。

    首先看看这两个属性在html中是如何使用的。

<div id="loading"> </div>
<div class="icon"> </div>
解释上面的代码,
id="loading",意思是定义了一个id,它的值是“loading”;

class="icon" 意思是定义了一个类,它的类名是“icon”;
PS: “loading”和“icon”的是自定义的值,命名规范都要遵守相应的命名规则,这个请自行查阅。
那么这两个属性是使用的时候有什么区别吗?什么时候用id?什么时候用class呢?请看下文。
1.定义区别。
(1).id具有唯一性,在一个网页中只能定义一次;
(2).class命名的类,可以出现多次。
2.使用区别。
(1).id在CSS中是以“#”开头的命名的;
(2).class在css中是以“.”开头命名的;
PS:
1.一般来说,id是元素的唯一代号,给某个元素赋予一个id后,通常不会再有其他元素有一样的id。CSS和JavaScript可以使用id来单独操作某一个元素;而class是一组(多于一个)元素的共同代号,通常网页中会有一组元素具有一样的class。CSS和JavaScript中对某个class的操作会反映到每一个对应的元素上。
2.ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;
从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

posted @ 2019-10-17 17:58  子健儿  阅读(3213)  评论(0编辑  收藏  举报