css中.class和id選擇器的異同點

             css中.class和id選擇器的異同點

一、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 文檔中出現一次,必須是唯一的id。

二、類選擇器:

在 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可以定義多個元素。就頁面效果而言,兩個東西的視覺效果幾乎無差別。

A2:id 選擇符爲什麼要少用,它有有什麼侷限性?

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章