DIV CSS 佈局教程網

在網頁中有很復雜的 HTML 結構，如果我們使用 CSS 來定義相關的樣式，就需要為這些結構指定相應的標志，然後再編寫相應的 CSS 選擇器來獲取他們賦予樣式。最常用的兩個標注屬性就是 id 和 class 了，例如：

1. <div class=”header” id=”header” ></div>  

現在還有更多的選擇方法，例如：屬性選擇器等。但是並不推薦使用，使用屬性選擇器雖然可以省略掉 id 和 class，但是存在 後期維護起來不方便、早期浏覽器兼容性不好、影響浏覽器的渲染效率 等問題。所以，雖然有了更多的選擇，我還是推薦使用 id 和 class 以及 元素名 來構造 CSS 選擇器。
既然 id 和 class 都可以標注 HTML 結構，那麼我應該優先選擇使用什麼？這就是本文即將討論的。

id 和 class 的區別

有經驗的朋友可以略過這一部分。

1.唯一性和重復可用性

id 在網頁結構中只能是唯一的，如果你指定了一個元素的 id 為 aa，那麼網頁中就不能再出現一個 id 為 aa 的 HTML 元素。雖然強大的浏覽器會支持多個重復 id 並賦予對應樣式，但這是不標准不允許的。

而 class 相反，它可以在網頁結構中重復使用，你指定了一個元素的 class 為 bb，同時可以指定下一個元素的 class 為 bb，這兩個元素可以同時被應用 bb 的樣式。此外，你還可以為一個元素制定多個 class 屬性值，這樣就會同時獲得多個屬性的樣式。

2.CSS 中優先級不同

在 CSS 選擇器中，對 id 和 class 的樣式應用優先級不同。id 的樣式優先級要高於 class 的樣式優先級，如果我對一個 id 為 aa 、class 為 bb 的 div 指定了下面的樣式：

1. #aa{background:red;}   
2. .bb{background:blue;}  

那麼浏覽器會顯示成紅色背景。

3.跳轉功能

使用 id 屬性可以增加錨標記跳轉功能，如果在頁面中我們對一個 div 指定 id 為 aa ，那麼我們在當前的 URL 後面加上 #aa ，頁面將會立刻跳轉到 id 為 aa 的 div 所在的位置。例如：百度百科的章節跳轉。而 class 沒有這個功能。

為什麼使用 class 而不是 id

使用 class 究竟有什麼好處？

1.減少命名

為復雜的結構起名字真是一個麻煩的事情，如果我使用 id 來標注，那麼我必須為每一個結構起一個名字。而在網頁中，有很多結構的樣式和效果都是一樣的（例如：統一的按鈕樣式），那麼我們僅僅編寫一個通用的 class 樣式，然後為所有的需要相同樣式的結構賦值這個 class 即可。

2.高度重復使用

class 可以重復應用在其他結構中，並且可以對某個元素應用多個 class ，那麼這樣就可以高度重復使用某個 class 樣式了。比較極端的實際應用就是原子類，例如：

1. .fl{float:left;display:inline;}   
2. .fr{float:rightright;display:inline;}  

盡可能小的簡短的寫出一些類，然後對於某個需要這個樣式（例如：上面的浮動）的元素直接寫上 class （例如：class=“fl”）。
一般的應用來說，對於某些需要相同樣式的結構，只編寫一個樣式，然後對這些結構賦值相同的 class 即可，這樣達到高度的樣式代碼重用，而且修改起來也比較方便。

3.優先級低

class 的優先級高於 元素名，低於 id ，利用優先級低的這個特性可以方便調試和樣式覆蓋。

如果我們之前對一個元素使用了 id 來標注，我們想修改這個元素的樣式，只能去修改對應的 CSS 樣式代碼或者對某樣式使用 !important 強調語法來覆蓋原有樣式。

如果元素使用了 class 來標注，那麼我們直接為元素增加一個 id ，然後構造一個元素 id 的 CSS 選擇器即可進行修改覆蓋。

正是因為這些特性，所以要盡量使用 class 來標注元素，方便後期維護等。

4.id 也是必須有的

class 也不是萬能的，有很多地方我們必須同時使用 id 來標注。

5.錨標記跳轉

要想在頁面中使用錨標記來跳轉，那只能指定某個跳轉目標的 id ，因為 class 可以被重復多次使用，所以不具備跳轉的功能。

6.用在 input 中

使用 input 的時候，通常要使用 label 標簽來描述這個 input 的功能。將 label 與 input 關聯的方法有兩種，一種是使用 label 的 for 屬性，屬性值就是 input 的 id 值，另一種就是將 label 把相應的 input 包裹起來。很顯然第一種比較靈活比較好，但是你必須要對相應的 input 指定一個 id 屬性。

此外，有些特殊的需求，也必須使用 id ，這裡不再總結了。

最佳的使用組合

之前有很多批評 class 的言論，甚至有言論說 W3C 應該廢除 class 標簽，潛行者m 也曾經是 id 屬性的狂熱使用者，但是在實踐過程中，越來越發現 class 的優點並改用 class。

比較好的使用組合就是對於絕大多數的元素和結構等使用 class 來指定，對於極個別需求特定功能的元素使用 id 標注。