ID與class之間有何不同

ID和class都是“鉤子”

我們需要一個使用html/xhtml語言描述文檔內(nèi)容的方式苗傅，類似的基礎(chǔ)元素有<h1>,<p>和<url>來完成這樣的工作，但我們的基礎(chǔ)標(biāo)簽不能覆蓋網(wǎng)頁元素和布局選擇中的所有類型粟耻。因此我們需要ID和class。
例如
<ul id="nav">
這將明確的給我們針對這個無序列表的機會眉踱，我們可以操作它到頁面中唯一的另一個無序列表中挤忙。
或者在我們的網(wǎng)頁中有一個段落并且沒有相關(guān)的標(biāo)簽去標(biāo)注它，例如頁腳（footer）谈喳，這里我們可以這樣做
<div id="footer">册烈。
或許我們有一些盒子（box）在我們的側(cè)邊欄中，為了保持內(nèi)容分離的方式有：
<div class="sidebar-box">
這些ID和class的鉤子需要我們進行標(biāo)注并執(zhí)行他們婿禽。css顯然需要我們建立選擇并做我們的風(fēng)格赏僧，但一些類似JavaScript的網(wǎng)頁語言也依賴他們。但他們之間的不同是什么呢扭倾？

ID是唯一的

• 每個元素僅可以有一個ID
• 每個頁面僅可以有一個元素擁有這個ID
  如果你不止一次的使用相同的ID你的代碼將不能通過驗證淀零，驗證對我們所有人來說很重要...

類不是唯一的

• 你可以在多個元素中使用相同的類
• 你可以使用多個類在一個元素中
  很多類型信息需要應(yīng)用到頁面中的多個對象中，這些都需要class實現(xiàn)膛壹，例如頁面多次使用“widgets”：
  <div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>
  現(xiàn)在可用“widget”作為你的鉤子驾中，對每一個地方進行相同的類型設(shè)置唉堪。單如果需要他們中的一個變得更大，還能享有其他的屬性哀卫，類可以覆蓋這些巨坊，你也可以實行更多的類：
  <div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>
  不需要去修改新類的名字，僅需要在新類中正確的填入屬性此改，這里的類屬性通過空格進行分隔已經(jīng)被大多數(shù)瀏覽器支持趾撵。

ID和class對于瀏覽器沒有默認設(shè)置

為一個元素添加一個id或者類并不會做任何默認的事情，
當(dāng)我作為一個初學(xué)者的時候共啃，這東西阻礙過我占调，你在一個網(wǎng)站工作斷定使用一個特定的類名稱解決了一個你現(xiàn)有的問題。然后又跳到另一個網(wǎng)站也碰到了相同的問題移剪，并且使用相同的類名稱來解決這個問題究珊，想象這類名有一些神奇的屬性，所以才發(fā)現(xiàn)它不工作纵苛。
class和ID他們自身沒有任何風(fēng)格信息剿涮。他們需要css作為他們的目標(biāo)實現(xiàn)風(fēng)格的顯示。

條形碼和序列號

在商店購買一個ipod攻人，包裝上有一個條形碼取试，設(shè)備有唯一的序列號。
商店并不以有效的方式存儲和使用序列號數(shù)據(jù)怀吻，使用條形碼確實很簡單的事情瞬浓，如果價格發(fā)生變動，你可以修改條形碼的價格蓬坡，不會修改每個獨立的序列號猿棉。
上述非常像ID和類，可重讀使用的信息應(yīng)該保存在類里面屑咳，總體唯一的信息需要保存在ID里面萨赁。

ID具有特殊的瀏覽器功能

類在瀏覽器中沒有特殊的屬性，但ID確實有一個非常重要的標(biāo)注它自己的袖子兆龙。這個就是URL中的“hash value”位迂。如有一個類似的URLhttp://yourdomain.com#comments，你的瀏覽器將會試圖去定位ID叫做“comments”的元素详瑞，并且會自動滾動頁面顯示這個元素掂林。注意這里很重要，瀏覽器將滾動任何元素坝橡，就是為了顯示它需要顯示的元素泻帮，所以如果你做一些特別類似你在body內(nèi)部有一個滾動的div區(qū)域這樣的事情，這個div也將被滾動计寇。
這就是為什么id必須絕對唯一的重要原因锣杂，這樣你的瀏覽器就知道哪里可以滾動脂倦。

元素可以兩個都有

這里沒有什么可以阻止你將ID和類放入一個單獨的元素中，事實上它通常是一個好消息元莫，例如默認為WordPress標(biāo)注評論列表項
<li id="comment-27299" class="item">
它有一個類用于你想要的所有提交在頁面上的風(fēng)格赖阻，但他還有一個唯一的ID值（被WordPress動態(tài)生成的，恰到好處）踱蠢。這個ID值用于直接鏈接火欧，現(xiàn)在我能直接連接到一個頁面上的特定提交。

CSS關(guān)不關(guān)心

關(guān)于css茎截，在這里你用ID或類什么也做不了苇侵，有時候試著切換圍繞在他們周圍的數(shù)值來解決問題，不企锌，css并不關(guān)心榆浓。

JavaScript關(guān)心的

JavaScript或許更多的工作是協(xié)調(diào)不同的類和ID間的關(guān)系，JavaScript依賴于每個頁面中的特定元素撕攒，否則通常使用的getElementByld函數(shù)是不可靠的陡鹃，對于熟悉jQuery的人來說都知道用它添加、刪除頁面元素中的類是多么的簡單抖坪。jQuery是本地并內(nèi)嵌的函數(shù)杉适。ID中不存在這樣的函數(shù)。JavaScript不負責(zé)去操縱這些值柳击，相對于引發(fā)更多的問題來說這是值得的。

如果不需要片习，就不要去用

類和id非常重要捌肴，使用時應(yīng)明確語義，避免下面的情況：
<a class="link">css-tricks.com</a>
我們已經(jīng)知道這個元素是一個鏈接藕咏，他有一個錨點的元素状知！沒有特殊的需要使用class。通過它的標(biāo)簽我已經(jīng)提供了風(fēng)格孽查。
避免這個：
<div id="right-col">
ID適當(dāng)?shù)氖褂米鳛橐粋€頁面將類似于一個單獨的列饥悴，但名稱不合適。師徒描述元素的上下文不在這里或者一個ID

微格式只是特殊的類名

想象中微格式在你的head以上盲再？他們不在那里西设，他們僅是標(biāo)注使用標(biāo)準(zhǔn)的類名里面所包含的信息。導(dǎo)出一個標(biāo)準(zhǔn)的名片：
<div class="vcard">
<a class="fn org url" >CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">info@commerce.net</span>
</div>
</div>