前端工程師的基本知識:HTML與CSS
前端工程師的基本知識:HTML與CSS

想當前端工程師的你,你得知道ID選擇器和Class選擇器的差異.

前端工程師的基本知識:ID選擇器宣告法

前端工程師的基本知識:ID選擇器宣告法

這篇中提到:Class 及 ID 都是使用者設定的選擇器 (selector)。Class 選擇器的說明如這篇,ID 選擇器的說明如下

ID 選擇器

Class 的宣告法,其實就只是先放一個井字號 (#),再列出選擇器名稱。格式如下所示:

ID 名稱{ 
屬性:設定值;
...
}

舉例來說,當前端工程師要定義導覽列的顏色為代號「#0000FF」的顏色時,宣告的 CSS 就會如下:

#navbar {
color:#0000FF;
}

如果要將以上的樣式套用在 HTML 中,前端工程師可以試試以下的 HTML 碼:

<p class="navbar">這是用 id 選擇器定義 navbar 文字顏色為「#0000FF」純藍色的例子。</p>

以上宣告顯示如下:

▶ 參考資料:HTML和CSS的網頁顏色代碼對照表

Class 跟 ID 的不同

這兩者最大的不同在哪裡呢?就在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。

另外,CCS的ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

至於何時要用 ID 、何時要用 Class,並沒有絕對的規則。但是大多的時候,Class 選擇器的使用頻率較高,因為 Class 選擇器在一個 HTML 文件中,可以被使用多次。但是當你要用 Javascript 的 GetElementByID 函數時,你就應該要用 CSS的ID 選擇器。

Class 名稱及 ID 名稱,大寫與小寫是不同的,不能互用。例如:.navbar 及 .NavBar,是代表兩個不同的 Class 選擇器。

 

參考來源:

想成為前端工程師你,必須知道的事有這些!

達內教育海外合作企業

最後修改日期: 2019-03-15