這次帶給大家標註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中文網其它相關文章！
相關閱讀：
以上是標註HTML元素時class與id有什麼不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！
