CSS 的 ID 和 Class 有什麼區別？如何正確使用它們？

01-04

ID"s are unique.

Each element can only have only one ID.

Each page can have only one element with that ID

Classes are NOT unique

You can use the same class on multiple elements.

You can use multiple classes on the same element.

CSS doesn"t care,But Javascript cares.

說下我自己負責的組做項目的心得吧。css只用class來寫並有專門的class通用和私有模塊命名，id具有唯一性且優先順序太高只作為js操作dom的掛鉤全部不添加樣式，如果使用jq或zepto的話，操作的class類名一般也不加樣式，這部分的class命名和id一樣由js來制定。這樣做比較適合大型，多人維護並且需要長期迭代的項目，css的class類名和js操作的id、class類完全分離，這樣產品的ui或者產品交互邏輯變動二者互不影響，易維護。

對於CSS而言，id和class都是選擇器，唯一不同的地方在於權重不同。

如果只說CSS，上面那一句話就講完了。

拓展出來，對於html而言，id和class都是dom元素的屬性值。不同的地方在於id屬性的值是唯一的，而class屬性值可以重複。

id還一個老特性是錨點功能，當瀏覽器地址欄有一個#xxx，頁面會自動滾動到id=xxx的元素上面。

由於大家都是選擇器，曾經一段時間在前端重構分開的公司，會用不同類型的選擇器來分隔開發人員職責，前端用id操作dom，重構用class來操作dom，當然現在是不推薦這樣做的

---------- update 2016.10.19 --------

看了下大部分答案，發現大家(包括我)都忽略了一個最重要的點，那就是 id 作為 unique identifier 究竟是怎麼定義的，最新的 html5 spec 中這樣寫道：

Note:There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.
Note:An element"s unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

也就是說，id 通常應該由純數字組成，且不應該包含特別的含義。

--------- 以下是原回答 -----------

這種問題還得看標準怎麼描述的：

id：The id attribute specifies its element"s unique identifier (ID). [DOM]

class：There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

簡言之就是，id是身份證應用中唯一。class是類別標識，表明當前元素屬於哪一類。關於用法上，最容易誤用的就是class，按照w3c的描述，class應該是描述內容的本質(語義)的而不是內容長什麼樣的，也就是說，你不應該寫非語義化的class。典型的反面教材就是 class="fl mr10" 之流。

知乎上賀老早前就答過幾次這類問題，可以去搜一下。嫌麻煩的也可以看看我整理的這篇 Web語義化標準解讀 · Issue #33 · kuitos/kuitos.github.io · GitHub

請勿使用id，除非用於錨定位。將id從css和js手中還給html和url。

請勿使用全局變數，除非你做的是api。將全局變數還給共識性規範的介面。

id給js用，class給css用

ID具有唯一性，Class具有普遍性。
ID是唯一的，所以盡量在結構外圍使用，通常用於頁面布局。
Class是可重複的，所以盡量在結構內部使用，通常用於樣式定義。
ID的樣式優先順序高於Class。

身份證號和體貌特徵的區別：

身份證號精確定位一個人，只能一一對應；

體貌特徵批量定位某些人，可以N對N。

所有的貓都有尾巴，這就是 class；你家的花花尾巴是黃黑雜色的，「花花」就是id。

—----------------------------

你有一個網頁，上面3個按鈕，要讓它們高寬相同，就用 class；其中的「提交」按鈕的背景更亮，就用id來指定css。

1、ID是身份證，Class是姓名。前者唯一，後者可以重複。

2、css的特殊性方面：ID權值是100，class權值是010

顧名思義。

ID是英文IDentity的縮寫,ID是身份標識號碼的意思,是一個編碼，而且是唯一的。在Html中給一個Dom節點定義一個ID就是給了他一個身份識別。

Class就是類的意思，表示一類型的樣式，用來定義通用的樣式然後給需要運用到這個樣式的Dom節點賦予這個Class。

我這麼使用：

如果一個元素在頁面中出現一次，並且需要在JS中添加動態效果的話就用ID。

其他情況用class。

我個人使用經驗：ID is for JavaScript, Class is for CSS. 盡量不要去混淆這兩者。

在樣式表定義一個樣式的時候，可以定義id也可以定義class。

1、在CSS文件里書寫時，ID加前綴"#"；CLASS用"."

2、id一個頁面只可以使用一次；class可以多次引用。

3、ID是一個標籤，用於區分不同的結構和內容，就象名字，如果一個屋子有2個人同名，就會出現混淆；class是一個樣式，可以套在任何結構和內容上，就象一件衣服；

4、從概念上說就是不一樣的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。

目前的瀏覽器還都允許用多個相同ID，一般情況下也能正常顯示，不過當你需要用JavaScript通過id來控制div時就會出現錯誤。

歡迎就前端問題進行交流

最簡單的理解

你是學生，

class = 你的班級班裡所有的學生都可以說我是XX班的

ID = 你的學號. 唯一的

id和class都可以寫式樣，但要對複數的元素設置同樣的式樣只有用class。

id更加多的作用是用來標記唯一，比如後端生成的序列號。

因為id的優先順序比class高很多，所以通常不建議使用id寫式樣。因為在迭代過程中，修改式樣每次都要查找是否有id覆蓋掉修改的式樣。

指名道姓就用ID，找一類同樣的就用class

我來回答下如何使用吧。

id、class只有唯一性、普遍性上的區別。雖然，樣式上，腳本上都可以使用選擇器來選中想要的元素。但是，如果想要選中的元素是唯一的話，那顯然沒有id來的便捷、效率。

id是身份證，唯一識別特性

class是門牌號吧（打個比方），是說為一類標記都指定的樣式，具有一定的普遍性

理論上說，你可以只使用id或者class，但是代碼的靈活健壯，性能都會是問題

所以一般都是結合使用

ID for個體，多用於Javascript操作DOM；

Class for群體，可以通過給多個元素賦予同一class 來批量設置CSS

id一個頁面應該是唯一的

class 不是唯一的

一個頁面存在多個id 如果js在一個container裡面去取這個id 在chrome等高級瀏覽器里不會有問題在IE9以下會取不到

如果寫的是組件一個頁面可能存在多個組件實例所以這個時候最好不要使用id除非有什麼需要全局處理的問題

我可能是來歪樓的。看到幾位前輩都在從技術面的角度來解釋，但還有一種情況是我在校招程序員的面試中頻繁遇到的，跟大家分享一下。哦，補充一下背景：我所在的公司在３線城市，中小企業很多，ＩＴ技術較為落後。

　　我倒是覺得會問這個問題的人更多的情況是在剛要離開學校，去到一些三流建站公司看到既有的代碼出於瀏覽器兼容性的考慮而大面積使用ID而不是class時所產生的疑問。最近一年來面試的應聘程序員的童鞋裡面，凡是去過中企動力之類的企業之後都會有如上的困惑。

簡言：IE6害死人吶

解釋：IE6及以下的瀏覽器目前全球範圍內用戶最集中的地區在大陸，在IE6中如果選擇某個元素去應用CSS或javascript特效時，用class選則的在IE6中不會被正常選擇，但用ID則沒有這問題。

　　如RapGIS所言，為了此類兼容性而讓ＩＤ命名系統變得非常複雜，而且會增加系統維護的難度。但由於國內建站的公司既有的代碼庫已經用了很多年了，推倒重來的成本太高（主要是面向想初次上線的中小企業提供建站服務的某幾個公司），懶得高薪牛人只用應屆生，又不願意投錢培訓，只好讓廉價碼農拿學校書本上的過氣教材繼續在自家的系統上修修補補。凡是遇到被這類公司蹂躪過的童鞋，我都會用很堅定的語氣告訴ＴＡ：「要順應技術的革新，不要浪費生命去做向ＩＥ６兼容的傻事」，能救一個算一個，也算對得起孩子們大老遠跑來面試的誠意了。

整個DOM中不能出現id名是一樣的元素，在同一個頁面中定義的#ID選擇器在這個頁面中只能被使用一次，CSS中寫法是 #idName{/*css*/},在其他頁面中可以使用同名ID，調用同名ID css也沒有問題

而class可以綁定給多個元素，定義的樣式可以重複使用在css中寫法是.className{/*css*/}