前端工程師的基礎課程-ID選擇器

前端工程師如何善用 ID 選擇器? Class 和 ID 的差別是什麼?

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

ID 選擇器

Class 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。格式如下：

ID 名稱{ 
屬性：設定值；
...
}

舉個例子來說，如前端工程師要定義導覽列的顏色為代號「#0000FF」的顏色時，宣告的 CSS 如下：

#navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內，前端工程師用以下的 HTML 碼：

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

以上宣告顯示如下：

這兩者之間最大的不同，在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。

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

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

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