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>

提交重置程式碼

自動運行

全螢幕