我們平常在用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值用於直接連結，現在我能直接連線到一個頁面上的特定提交。

https://www.houdianzi.com/ vi設計公司

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。