Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS設計規範[3]-id與class的選用時機

在區塊命名那段有講過會用div來當區塊的組件,並給他一個id名,這樣的做法有多個好處:

  • 讓該區塊有一個明確的識別名稱。
  • 可以取代所有<a name=”xxx”>錨點。
  • 增加具體值 (樣式權重)。
  • 用來封裝樣式,限制影響範圍,形成樣式自我保護區域。

如果這邊改用class的話,便無法有上述優點,一般我們只有在區塊和表單欄位才會用id,其餘一律用class。

雖然class沒有像id那樣的優點可以使用,但是他有一項id所沒有的優點:一個區塊可同時有多個不同的class。最常見多個class的情況是清除浮動,再加上CSS Sprites的背景圖,例如:=”clear cs-bg”。class的順序並不會影響到樣式的權重,所以class=”clear cs-bg”和class=”cs-bg clear”意思是一樣的,這裡的權重完全取決於你CSS的權重,如果權重一樣,則最後寫的會蓋掉前面的。

範例: class的順序並不會影響到樣式的權重
以上述例子說明:雖然class的順序是red在最後面,但是CSS中這三個class的權重一樣,所以不管class的順序如何調整,最後都會是藍色的。

Leave a Reply

*