1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [CSS]id與class別再傻傻分不清楚

[CSS]id與class別再傻傻分不清楚

2008/11/21
  使用過CSS的人對於IDClass應該感到不陌生吧!但這二個有何不同呢?對於新手而言可能感到一頭霧水,因為在ID或是Class中所定義樣式,皆可以在指定的標籤元素中被引用,話雖然如此,但這之間卻隱含了重要的觀念,接下來將剖析這二大屬性的差異性與使用性。

  首先,先從ID談起吧!簡單的來說, ID是唯一性的、不可重覆的,舉例來說,ID就如同我們的身份證一樣,每個人都有個自的身份證號碼,應該不會有二個人的身份證字號一模一樣的吧!來~回到網頁,相信應該有不少人曾經重覆使用ID來套版吧!畫面一樣套的美美的,那會有什麼問題,對,若只單單拿來套版的話,不會因為重復使用ID而使得此樣式無法使用的狀況,但今天若使用Javascript或ASP.NET時,當ID重覆時,程式則無法正確的判斷出,誰才是正身,比方說:A001王大明、A001蔡丫花、A001王明月,各位可發現這三人的ID都是A001,假設你希望將蔡丫花要改叫蔡小花時,當一抓A001=蔡小花則會發現,所有的人都變成了蔡小花了,因此正確的作法應該是,A001王大明、A002蔡丫花、A003王明月,如此一來,當你指定A002=蔡小花時,程式則會正確的抓取到所指定的ID並進行更名的動作,其它則依然不變。

  什麼是Class呢?Class與ID正好相反,Class是可被拿來被重覆使用的,可將同一群組或類別來進行設定,比方來說:王大明、蔡丫花、王明月他們都是101班,因此就可以設定一個Class為101班,然後將101班設定為鴨鴨班,因此以後不管是王大明、蔡丫花、王明月,都是鴨鴨班的成員之一,若今天想將鴨鴨班改成企鵝班時,此時只要將101班裡的設定改成企鵝班,如此一來王大明、蔡丫花、王明月就都變成企鵝班了,則不需要再一一的設定(王大明=企鵝班、蔡丫花=企鵝班、王明月=企鵝班)。

  經過一番的解釋後,對於IDClass有比較清楚了嗎?而二者的使用時機又是為何呢?簡單的來說,若只要設定樣式的,則採用Class來作設定,若要透過Javascript或其它的程式語言,找尋物件時,請使用ID來進行相互對應的動作。