CSS id选择器和class选择器区别

前一节介绍了几种基本的选择器，这一节分享的是id和class的区别比较

id和class属性是网页中两个通用的属性，它们协同工作使整个页面变得丰富多彩。当我们为一个元素定义样式时。可以使用id，也可以使用class。但是我们也应该注意这两者的区别。

1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。

2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。

3，id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上。

4，在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式：而class相反，它先定义好一类样式，然后再页面中根据需要把类样式应用到不同的元素和内容上面。

5，目前浏览器都能允许在同一个页面内出现多个相同属性值的id，一般情况下也能正常显示，不过当使用javascript通过id来控制元素时就会出现错误。

6，在实际应用时，class更多的被应用到文字版块以及页面修饰等方面，而id更多地被用来实现宏伟布局和设计包含块，或包含框的样式。

注释：

ID 有高优先级、唯一性的特点，特指「个体」。
相对于 ID，class 的优先级比较适中，特指「特定群体」。
Class 的使用需要参考面向对象的抽象概念，把共有的属性抽象出来。

ID是先找到结构/内容，再给它定义样式；
Class是先定义好一种样式，再套给多个结构/内容。

新建文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>id和class</title> 
<style>
 /*id选择器*/
	#rrrrr 
	{
	background-color: red;
	}
	/*类选择器*/
	.important 
	{
	color: aqua;
	font-size:smaller;
	}
	/*类选择器*/
	.important2222
	{
	font-size:larger;
	background-color:black;
	}
</style>
</head>
<body>
 <!--可以同时使用多个类-->
 <div class="important important2222"> 
 1、人生最精彩的不是成功的那一瞬间，而是回头看，那段漆黑看似没有尽头、苦苦摸索的过程。其实，我只是很在意，在意在我所在意的人的心里，我，在哪个位置。
 </div>
 <h1>
 1、人生最精彩的不是成功的那一瞬间，而是<span>3333333333</span>
 </h1>

 <p>
 2、生活再不如人意，都要学会自我温暖和慰藉，<br />
 给自己多一点欣赏和鼓励。生活就是童话，<br />
 只要心存美好，结局就会是美好。<br />
 </p>
 <p id="rrrrr">
 3、旁观者的姓名永远爬不到比赛的计分板上。
 </p>
 <p>
 4、强烈的信仰会赢取坚强的人，然后又使他们更坚强。
 </p>
 <p>
 5、只要我们能梦想的，我们就能实现。
 </p>
 <p>
 6、每一个成功者都有一个开始。勇于开始，才能找到成功的路。
 </p>
 </body>
</html>

提交重置代码

自动运行

全屏