CSS – 什麼時候該使用IDs 或 Classes

很多人在開始學CSS的時候徑常對於什麼時候該使用ID 或 Class有混淆的感覺。這是因為基本上它們的使用功能可以說是一樣的。這一則簡短文章將說明為什麼要有這兩個元件及它們的不一樣性在那裡。

什麼是ID 選擇器

跟據W3C的說法，「ID在每個HTML文件裏應該是要獨一無二的」。意思是說如果你有一個ID叫content，那這個ID在相同的文件裡應該只會出現一次。

在同一個HTML文件上的重復性

1. 同樣一個Class名稱可以在同一文件上重復使用
2. 同樣一個ID名稱只能在同一個文件上使用一次

因此，如果你想要在一個文件上，使用一次以上而且是同樣的名稱的CSS Selector，Class會是最好的選擇。

結合classes selector

你可以使用多重的classes在同一個HTML element, 例如 <_p class="highlight indent">。但是對ID而言你只能夠使用一次。

IDs比Classes 有更高的繼承性

在很多時候你可能會遇到同樣一個HTML element 同時被 id和class宣告，如列子一。如果這種衝突發生 ID 名稱content的font-weight:bold 將會被選擇。

列子一

#content { font-weight: bold; }
.content-heading { font-weight:normal; }

<_div id="content" class="content-heading">

內容 ->

<_/div>

結論是，IDs 和Classes是提供給網頁設計人員更多的選擇性，讓設計人員在設計網頁結構時能更有組織性。