標注HTML元素時class與id有什么不同

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

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

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

id 和 class 的區(qū)別

有經(jīng)驗的朋友可以略過這一部分。

1.唯一性和重復可用性

id 在網(wǎng)頁結構中只能是唯一的，如果你指定了一個元素的 id 為 aa，那么網(wǎng)頁中就不能再出現(xiàn)一個 id 為 aa 的 HTML 元素。雖然強大的瀏覽器會支持多個重復 id 并賦予對應樣式，但這是不標準不允許的。

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

2.CSS 中優(yōu)先級不同

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

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

那么瀏覽器會顯示成紅色背景。

3.跳轉功能

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

為什么使用 class 而不是 id

使用 class 究竟有什么好處？

1.減少命名

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

2.高度重復使用

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

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

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

3.優(yōu)先級低

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

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

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

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

4.id 也是必須有的

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

5.錨標記跳轉

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

6.用在 input 中

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

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

最佳的使用組合

之前有很多批評 class 的言論，甚至有言論說 W3C 應該廢除 class 標簽，潛行者m 也曾經(jīng)是 id 屬性的狂熱使用者，但是在實踐過程中，越來越發(fā)現(xiàn) class 的優(yōu)點并改用 class。

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

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

相關閱讀：

怎樣讓移動端的網(wǎng)頁內(nèi)容自適應

table表格中的內(nèi)容溢出應該如何處理

怎么實現(xiàn)獲取textarea的動態(tài)剩余字數(shù)

以上就是標注HTML元素時class與id有什么不同的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！