在上一篇介紹了類別與ID選擇器,但什麼時候要用類別選擇器,什麼時候要用ID選擇器?這篇就會針對這兩個相似的選擇器做個比較。
比較表格
比較項目\選擇器 | 類別選擇器 | ID選擇器 |
---|---|---|
寫法 | .classname{...} |
#IDname{...} |
選擇對象 | 會選擇有所有相符class的元素 | 只會選擇第一個有相符ID的元素 |
使用次數 | 可重複使用 | 一個頁面只能使用一次 |
與css或html的關聯 | 只能用來標記元素並為他加上樣式 | 可能會與html有關(比如說內頁跳轉連結) |
使用時機 | 一般情況都會選擇使用 | 特定時機才會使用 |
結論
一般情況下盡量使用類別選擇器,因為類別選擇器就是為了css styling而設計的,ID的意義主要還是在html上(比如說跳到某個段落,舉個例子點這個連結可以跳到比較表格,你可以看到網址上多了#比較表格,這就是ID最大的用途),當然在有需要的情況下還是可以使用ID選擇器,但不要只是為了幫元素加點樣式就使用ID選擇器。