重金屬AI工程師的Coding分享

要成為前端工程師的你,你絕對不能不知道ID選擇器和Class選擇器的差異.

在這篇中提到：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 選擇器。  

參考連結:

前端工程師基本知識之一:Class選擇器宣告法!

 ​​程式課程選達內，美上市IT課程教育集團

​​​​​​​

​​​​​​​

​​​​​​​