CSS中的id与class的相同与区别

最新推荐文章于 2023-06-20 21:28:29 发布

Taylor swift是我的爱豆

最新推荐文章于 2023-06-20 21:28:29 发布

阅读量697

点赞数

分类专栏： html css3 文章标签： css3 html css

本文链接：https://blog.csdn.net/m0_46614313/article/details/106255288

版权

html 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

相同之处

在css中，id选择符和class选择符，都是用来给元素添加色彩的，它们齐心协力使得我们的整个页面变得色彩斑斓。

id与class的最基本区别

在css样式表中书写时，id前面应该加前缀符号‘#’，而class前面应该加前缀符号‘.’。
id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

两者优先级区别

如下图所示，id的优先级要高于class

<html>
<head>
<style type="text/css">
#csdn
{
	color:green
}
 
.csdn
{
	color:red
}
</style>
</head>
 
<body>
<p id="csdn" class="csdn">What the hell ? </p>
</body>
 
</html>

两者的操作过程

class是一个样式，它先定义好，然后可以套给多个结构/内容, 利于同个样式的多结构/内容。也就是说class名称可以相同。
id是一个标签，用于区分不同的结构和内容，id是先找到结构/内容，再给它定义样式；
好比你的名字，如果屋子有2个人同名，就会出现混淆；但是身份证是唯一的，用身份证就可以找到你，给你套上衣服。
这里身份证就好比id，衣服就是找到你之后给你套上的样式。
小结：id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。