剖析標(biāo)注HTML元素時(shí)class比id所具有的優(yōu)勢(shì)

潛行者m 發(fā)布時(shí)間：2016-05-09 11:24:50 作者：于江水

這篇文章主要介紹了標(biāo)注HTML元素時(shí)class比id所具有的優(yōu)勢(shì),id的CSS優(yōu)先級(jí)比class要高,因而修改樣式時(shí)在class的基礎(chǔ)上再去構(gòu)建id標(biāo)注的元素會(huì)更方便,需要的朋友可以參考下

在網(wǎng)頁(yè)中有很復(fù)雜的 HTML 結(jié)構(gòu)，如果我們使用 CSS 來(lái)定義相關(guān)的樣式，就需要為這些結(jié)構(gòu)指定相應(yīng)的標(biāo)志，然后再編寫(xiě)相應(yīng)的 CSS 選擇器來(lái)獲取他們賦予樣式。最常用的兩個(gè)標(biāo)注屬性就是 id 和 class 了，例如：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

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

id 和 class 的區(qū)別

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

1.唯一性和重復(fù)可用性

id 在網(wǎng)頁(yè)結(jié)構(gòu)中只能是唯一的，如果你指定了一個(gè)元素的 id 為 aa，那么網(wǎng)頁(yè)中就不能再出現(xiàn)一個(gè) id 為 aa 的 HTML 元素。雖然強(qiáng)大的瀏覽器會(huì)支持多個(gè)重復(fù) id 并賦予對(duì)應(yīng)樣式，但這是不標(biāo)準(zhǔn)不允許的。

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

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

那么瀏覽器會(huì)顯示成紅色背景。

3.跳轉(zhuǎn)功能

使用 id 屬性可以增加錨標(biāo)記跳轉(zhuǎn)功能，如果在頁(yè)面中我們對(duì)一個(gè) div 指定 id 為 aa ，那么我們?cè)诋?dāng)前的 URL 后面加上 #aa ，頁(yè)面將會(huì)立刻跳轉(zhuǎn)到 id 為 aa 的 div 所在的位置。例如：百度百科的章節(jié)跳轉(zhuǎn)。而 class 沒(méi)有這個(gè)功能。

為什么使用 class 而不是 id

使用 class 究竟有什么好處？

1.減少命名

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

2.高度重復(fù)使用

class 可以重復(fù)應(yīng)用在其他結(jié)構(gòu)中，并且可以對(duì)某個(gè)元素應(yīng)用多個(gè) class ，那么這樣就可以高度重復(fù)使用某個(gè) class 樣式了。比較極端的實(shí)際應(yīng)用就是原子類，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

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

盡可能小的簡(jiǎn)短的寫(xiě)出一些類，然后對(duì)于某個(gè)需要這個(gè)樣式（例如：上面的浮動(dòng)）的元素直接寫(xiě)上 class （例如：class=“fl”）。
一般的應(yīng)用來(lái)說(shuō)，對(duì)于某些需要相同樣式的結(jié)構(gòu)，只編寫(xiě)一個(gè)樣式，然后對(duì)這些結(jié)構(gòu)賦值相同的 class 即可，這樣達(dá)到高度的樣式代碼重用，而且修改起來(lái)也比較方便。

3.優(yōu)先級(jí)低

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

如果我們之前對(duì)一個(gè)元素使用了 id 來(lái)標(biāo)注，我們想修改這個(gè)元素的樣式，只能去修改對(duì)應(yīng)的 CSS 樣式代碼或者對(duì)某樣式使用 !important 強(qiáng)調(diào)語(yǔ)法來(lái)覆蓋原有樣式。

如果元素使用了 class 來(lái)標(biāo)注，那么我們直接為元素增加一個(gè) id ，然后構(gòu)造一個(gè)元素 id 的 CSS 選擇器即可進(jìn)行修改覆蓋。

正是因?yàn)檫@些特性，所以要盡量使用 class 來(lái)標(biāo)注元素，方便后期維護(hù)等。

4.id 也是必須有的

class 也不是萬(wàn)能的，有很多地方我們必須同時(shí)使用 id 來(lái)標(biāo)注。

5.錨標(biāo)記跳轉(zhuǎn)

要想在頁(yè)面中使用錨標(biāo)記來(lái)跳轉(zhuǎn)，那只能指定某個(gè)跳轉(zhuǎn)目標(biāo)的 id ，因?yàn)?class 可以被重復(fù)多次使用，所以不具備跳轉(zhuǎn)的功能。

6.用在 input 中

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

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

最佳的使用組合

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

比較好的使用組合就是對(duì)于絕大多數(shù)的元素和結(jié)構(gòu)等使用 class 來(lái)指定，對(duì)于極個(gè)別需求特定功能的元素使用 id 標(biāo)注。