CSS» 常用範例 » [CSS]id與class別再傻傻分不清楚

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

分類：CSS» 常用範例 | 發表日:2008-11-21 | 瀏覽：11,183 views

加入書籤：

　　使用過CSS的人對於ID與Class應該感到不陌生吧!但這二個有何不同呢?對於新手而言可能感到一頭霧水，因為在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班裡的設定改成企鵝班，如此一來王大明、蔡丫花、王明月就都變成企鵝班了，則不需要再一一的設定（王大明=企鵝班、蔡丫花=企鵝班、王明月=企鵝班)。

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