標註HTML元素時class與id有什麼不同

這次帶給大家標註HTML元素時class與id有什麼不同，標註HTML元素時class與id的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

<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 指定了下面的樣式：

#aa{background:red;}   
.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 樣式了。比較極端的實際應用就是原子類，例如：

.fl{float:left;display:inline;}   
.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 標註。

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

相關閱讀：

如何讓行動端的網頁內容自適應

table表格中的內容溢位應該如何處理

怎麼實作取得textarea的動態剩餘字數

以上是標註HTML元素時class與id有什麼不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！