CSS ID 選取器 #：唯一元素的選取方式

使用 # 符號選取 HTML 文件上具有特定 ID 的元素（在該屬性內，僅能套用一個 ID），且 ID 名稱的大、小寫必須相符。

以下案例便是利用 ID 選取器 將對象選取出來並進行樣式的改變。

注意事項

ID 就好比您的身分證字號或車牌號碼，具有唯一性，在台灣不應該出現第二個相同的身分證字號或車牌號碼。所以，在同一份 HTML 文件中，對於已經使用過的 ID，也不應該出現於該文件當中。

雖然說 HTML 不會阻止您重複使用，但對於唯一性的規範，Away 還是建議各位都能遵守。也請各位試想一下，若把 ID 拿來重複使用，那與類別相比又有什麼差異呢?

與類別的差異

比較項目	ID 選取器	類別選取器
符號	#	.
同一份文件可出現次數	一次	不限
同一個元素可套用幾個	一個	多個
權重	高	中
適合用途	錨點、JavaScript	樣式

/* 權重高到難以覆蓋 */
#sidebar { width: 300px; }

/* 建議：樣式用類別 */
.sidebar { width: 300px; }

ID 真正的用途

<!-- 錨點連結的目標 -->
<a href="#pricing">方案價格</a>
<section id="pricing">...</section>

<!-- label 與欄位的關聯 -->
<label for="account">帳號</label>
<input type="text" id="account">

這兩個場合都需要唯一識別，正是 ID 存在的理由。細節可參考 超連結 <a> 與 欄位說明 <label>。

常見問題

ID 和類別該怎麼選？

樣式一律用 類別。ID 具唯一性又 權重 極高，拿來寫樣式時很難覆蓋，也無法重複使用。ID 留給錨點連結與 JavaScript 選取 比較合適。

同一份文件重複用同一個 ID 會怎樣？

瀏覽器通常還是會顯示樣式，但這已違反規格。以 ID 選取元素的程式只會拿到第一個，錨點連結也只會跳到第一個，錯誤難以察覺。

ID 選取器的權重有多高？

比類別高一個級距，一個 ID 就勝過任何數量的類別組合。要覆蓋它往往得寫更長的選取器或動用強制優先，維護成本很高。

那 ID 什麼時候該用？

錨點連結的目標、<label> 的 for 對應、以及 JavaScript 要精準取得的元素。這些場合本來就需要唯一識別，正是 ID 的用途。

延伸閱讀

類別選取器優先權 specificity超連結 <a>選取器介紹