我們平常在用DIV+CSS制作html網頁頁面時，常會用到class 和id來選擇調用CSS樣式屬性。對學習CSS的新手來說class和id可能比較模糊，同時不知道什么時候該用class，什么時候又用id，以及它們用法與限制是怎么樣的。
ID和class都是“鈎子”
我們需要一個使用html/xhtml語言描述文檔內容的方式，類似的基礎元素有<h1>,<p>和<url>來完成這樣的工作，但我們的基礎標簽不能覆蓋網頁元素和布局選擇中的所有類型。因此我們需要ID和class。
例如
<ul id="nav">
這將明確的給我們針對這個無序列表的機會，我們可以操作它到頁面中唯一的另一個無序列表中。
或者在我們的網頁中有一個段落並且沒有相關的標簽去標注它，例如頁腳（footer），這里我們可以這樣做
<div id="footer">
或許我們有一些盒子（box）在我們的側邊欄中，為了保持內容分離的方式有：
<div>
這些ID和class的鈎子需要我們進行標注並執行他們。css顯然需要我們建立選擇並做我們的風格，但一些類似JavaScript的網頁語言也依賴他們。但他們之間的不同是什么呢？
ID是唯一的
-
每個元素僅可以有一個ID
-
每個頁面僅可以有一個元素擁有這個ID
如果你不止一次的使用相同的ID你的代碼將不能通過驗證，驗證對我們所有人來說很重要...
類不是唯一的
-
你可以在多個元素中使用相同的類
-
你可以使用多個類在一個元素中
很多類型信息需要應用到頁面中的多個對象中，這些都需要class實現，例如頁面多次使用“widgets”：
<div></div> <div></div> <div></div>
現在可用“widget”作為你的鈎子，對每一個地方進行相同的類型設置。單如果需要他們中的一個變得更大，還能享有其他的屬性，類可以覆蓋這些，你也可以實行更多的類：
<div></div> <div></div> <div></div>
不需要去修改新類的名字，僅需要在新類中正確的填入屬性，這里的類屬性通過空格進行分隔已經被大多數瀏覽器支持。
css中id和class的區別
1、語法區別：
id對應css是用樣式選擇符“#”（井號）。
class對應css是用樣式選擇符“.”(英文半角輸入句號)。
2、使用次數區別：
class可以在頁面里面重復使用，
id由於在頁面里面只能出現一次，所以不能重復使用，
所以盡量用class來寫，這樣能在頁面里面重復引用你寫的css，減小工作量和代碼量。
ID和class對於瀏覽器沒有默認設置
為一個元素添加一個id或者類並不會做任何默認的事情，
當我作為一個初學者的時候，這東西阻礙過我，你在一個網站工作斷定使用一個特定的類名稱解決了一個你現有的問題。然后又跳到另一個網站也碰到了相同的問題，並且使用相同的類名稱來解決這個問題，想象這類名有一些神奇的屬性，所以才發現它不工作。
class和ID他們自身沒有任何風格信息。他們需要css作為他們的目標實現風格的顯示。
條形碼和序列號
在商店購買一個ipod，包裝上有一個條形碼，設備有唯一的序列號。
商店並不以有效的方式存儲和使用序列號數據，使用條形碼確實很簡單的事情，如果價格發生變動，你可以修改條形碼的價格，不會修改每個獨立的序列號。
上述非常像ID和類，可重讀使用的信息應該保存在類里面，總體唯一的信息需要保存在ID里面。
ID具有特殊的瀏覽器功能
類在瀏覽器中沒有特殊的屬性，但ID確實有一個非常重要的標注它自己的袖子。這個就是URL中的“hash value”。如有一個類似的URLhttp://yourdomain.com#comments，你的瀏覽器將會試圖去定位ID叫做“comments”的元素，並且會自動滾動頁面顯示這個元素。注意這里很重要，瀏覽器將滾動任何元素，就是為了顯示它需要顯示的元素，所以如果你做一些特別類似你在body內部有一個滾動的div區域這樣的事情，這個div也將被滾動。
這就是為什么id必須絕對唯一的重要原因，這樣你的瀏覽器就知道哪里可以滾動。
元素可以兩個都有
這里沒有什么可以阻止你將ID和類放入一個單獨的元素中，事實上它通常是一個好消息，例如默認為WordPress標注評論列表項
<li id="comment-27299">
它有一個類用於你想要的所有提交在頁面上的風格，但他還有一個唯一的ID值（被WordPress動態生成的，恰到好處）。這個ID值用於直接鏈接，現在我能直接連接到一個頁面上的特定提交。
CSS關不關心
關於css，在這里你用ID或類什么也做不了，有時候試着切換圍繞在他們周圍的數值來解決問題，不，css並不關心。
JavaScript關心的
JavaScript或許更多的工作是協調不同的類和ID間的關系，JavaScript依賴於每個頁面中的特定元素，否則通常使用的getElementByld函數是不可靠的，對於熟悉jQuery的人來說都知道用它添加、刪除頁面元素中的類是多么的簡單。jQuery是本地並內嵌的函數。ID中不存在這樣的函數。JavaScript不負責去操縱這些值，相對於引發更多的問題來說這是值得的。
如果不需要，就不要去用
類和id非常重要，使用時應明確語義，避免下面的情況：
<a href="http://css-tricks.com">css-tricks.com</a>
我們已經知道這個元素是一個鏈接，他有一個錨點的元素！沒有特殊的需要使用class。通過它的標簽我已經提供了風格。
避免這個：
<div id="right-col">
ID適當的使用作為一個頁面將類似於一個單獨的列，但名稱不合適。師徒描述元素的上下文不在這里或者一個ID。