在網(wǎng)頁中有很復雜的 HTML 結(jié)構(gòu)，如果我們使用 CSS 來定義相關(guān)的樣式，就需要為這些結(jié)構(gòu)指定相應(yīng)的標志，然后再編寫相應(yīng)的 CSS 選擇器來獲取他們賦予樣式。最常用的兩個標注屬性就是 id 和 class 了，例如：
XML/HTML Code復制內(nèi)容到剪貼板
- <div class=”header” id=”header” ></div>
現(xiàn)在還有更多的選擇方法，例如：屬性選擇器等。但是并不推薦使用，使用屬性選擇器雖然可以省略掉 id 和 class，但是存在 后期維護起來不方便、早期瀏覽器兼容性不好、影響瀏覽器的渲染效率 等問題。所以，雖然有了更多的選擇，我還是推薦使用 id 和 class 以及 元素名 來構(gòu)造 CSS 選擇器。
既然 id 和 class 都可以標注 HTML 結(jié)構(gòu)，那么我應(yīng)該優(yōu)先選擇使用什么？這就是本文即將討論的。
id 和 class 的區(qū)別
有經(jīng)驗的朋友可以略過這一部分。
1.唯一性和重復可用性
id 在網(wǎng)頁結(jié)構(gòu)中只能是唯一的，如果你指定了一個元素的 id 為 aa，那么網(wǎng)頁中就不能再出現(xiàn)一個 id 為 aa 的 HTML 元素。雖然強大的瀏覽器會支持多個重復 id 并賦予對應(yīng)樣式，但這是不標準不允許的。
而 class 相反，它可以在網(wǎng)頁結(jié)構(gòu)中重復使用，你指定了一個元素的 class 為 bb，同時可以指定下一個元素的 class 為 bb，這兩個元素可以同時被應(yīng)用 bb 的樣式。此外，你還可以為一個元素制定多個 class 屬性值，這樣就會同時獲得多個屬性的樣式。
2.CSS 中優(yōu)先級不同
在 CSS 選擇器中，對 id 和 class 的樣式應(yīng)用優(yōu)先級不同。id 的樣式優(yōu)先級要高于 class 的樣式優(yōu)先級，如果我對一個 id 為 aa 、class 為 bb 的 div 指定了下面的樣式：
CSS Code復制內(nèi)容到剪貼板
- #aa{background:red;}
- .bb{background:blue;}
那么瀏覽器會顯示成紅色背景。
3.跳轉(zhuǎn)功能
使用 id 屬性可以增加錨標記跳轉(zhuǎn)功能，如果在頁面中我們對一個 div 指定 id 為 aa ，那么我們在當前的 URL 后面加上 #aa ，頁面將會立刻跳轉(zhuǎn)到 id 為 aa 的 div 所在的位置。例如：百度百科的章節(jié)跳轉(zhuǎn)。而 class 沒有這個功能。
為什么使用 class 而不是 id
使用 class 究竟有什么好處？
1.減少命名
為復雜的結(jié)構(gòu)起名字真是一個麻煩的事情，如果我使用 id 來標注，那么我必須為每一個結(jié)構(gòu)起一個名字。而在網(wǎng)頁中，有很多結(jié)構(gòu)的樣式和效果都是一樣的（例如：統(tǒng)一的按鈕樣式），那么我們僅僅編寫一個通用的 class 樣式，然后為所有的需要相同樣式的結(jié)構(gòu)賦值這個 class 即可。
2.高度重復使用
class 可以重復應(yīng)用在其他結(jié)構(gòu)中，并且可以對某個元素應(yīng)用多個 class ，那么這樣就可以高度重復使用某個 class 樣式了。比較極端的實際應(yīng)用就是原子類，例如：
CSS Code復制內(nèi)容到剪貼板
- .fl{float:left;display:inline;}
- .fr{float:rightright;display:inline;}
盡可能小的簡短的寫出一些類，然后對于某個需要這個樣式（例如：上面的浮動）的元素直接寫上 class （例如：class=“fl”）。
一般的應(yīng)用來說，對于某些需要相同樣式的結(jié)構(gòu)，只編寫一個樣式，然后對這些結(jié)構(gòu)賦值相同的 class 即可，這樣達到高度的樣式代碼重用，而且修改起來也比較方便。
3.優(yōu)先級低
class 的優(yōu)先級高于 元素名，低于 id ，利用優(yōu)先級低的這個特性可以方便調(diào)試和樣式覆蓋。
如果我們之前對一個元素使用了 id 來標注，我們想修改這個元素的樣式，只能去修改對應(yīng)的 CSS 樣式代碼或者對某樣式使用 !important 強調(diào)語法來覆蓋原有樣式。
如果元素使用了 class 來標注，那么我們直接為元素增加一個 id ，然后構(gòu)造一個元素 id 的 CSS 選擇器即可進行修改覆蓋。
正是因為這些特性，所以要盡量使用 class 來標注元素，方便后期維護等。
4.id 也是必須有的
class 也不是萬能的，有很多地方我們必須同時使用 id 來標注。
5.錨標記跳轉(zhuǎn)
要想在頁面中使用錨標記來跳轉(zhuǎn)，那只能指定某個跳轉(zhuǎn)目標的 id ，因為 class 可以被重復多次使用，所以不具備跳轉(zhuǎn)的功能。
6.用在 input 中
使用 input 的時候，通常要使用 label 標簽來描述這個 input 的功能。將 label 與 input 關(guān)聯(lián)的方法有兩種，一種是使用 label 的 for 屬性，屬性值就是 input 的 id 值，另一種就是將 label 把相應(yīng)的 input 包裹起來。很顯然第一種比較靈活比較好，但是你必須要對相應(yīng)的 input 指定一個 id 屬性。
此外，有些特殊的需求，也必須使用 id ，這里不再總結(jié)了。
最佳的使用組合
之前有很多批評 class 的言論，甚至有言論說 W3C 應(yīng)該廢除 class 標簽，潛行者m 也曾經(jīng)是 id 屬性的狂熱使用者，但是在實踐過程中，越來越發(fā)現(xiàn) class 的優(yōu)點并改用 class。
比較好的使用組合就是對于絕大多數(shù)的元素和結(jié)構(gòu)等使用 class 來指定，對于極個別需求特定功能的元素使用 id 標注。
