1. 程式人生 > >css中id選擇器和class選擇器的區別?

css中id選擇器和class選擇器的區別?

ID選擇器:

id 選擇器可以為標有特定 id HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器,第一個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:

#red {color:red;}

#green {color:green;}

下面的 HTML 程式碼中,id 屬性為 red p 元素顯示為紅色,而 id 屬性為 green p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>

<p id="green">這個段落是綠色。</p>

注意:id 屬性只能在每個 HTML

文件中出現一次

類選擇器:

CSS 中,類選擇器以一個點號顯示:

.center {text-align: center}

在上面的例子中,所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 程式碼中,h1 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

<h1 class="center">

This heading will be center-aligned

</h1>

<p class="center">

This paragraph will also be center-aligned.

</p>

注意:類名的第一個字元不能使用數字!它無法在 Mozilla Firefox 中起作用。

A1:二者主要的區別在哪裡呢?

id你只能用來定義單一元素,定義二個以後。頁面不會出現什麼問題,但是W3檢測的時候認為你頁面不符合標準;class是類,同一個class可以定義多個元素。就頁面效果而言,兩個東西的視覺效果幾乎無差別。

A2id 選擇符為什麼要少用,它有有什麼侷限性?

單一使用的樣式用id,需要程式、js動態控制的樣式用idid在頁面只能使用一次!提供少用id,因為id可能和頁面嵌的程式衝突(比如名稱相同等)!

A3:我該在什麼時候使用ID,什麼時候使用class

單一的元素,或需要程式、JS控制的東西,需要用id定義;重複使用的元素、類別,用class定義。