div 中id和class使用讲解

Posted 2022-12-02 程序员七哥

    在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是先定义好一种样式，再套给多个结构/内容。