本節(jié)書(shū)摘來(lái)自異步社區(qū)《Web前端開(kāi)發(fā)精品課 HTML與CSS進(jìn)階教程》一書(shū)中的第1章，第1.4節(jié)，作者： 莫振杰 更多章節(jié)內(nèi)容可以訪問(wèn)云棲社區(qū)“異步社區(qū)”公眾號(hào)查看。

1.4　id和class

id和class是HTML元素中兩個(gè)最基本的公共屬性。一般情況下，id和class都用來(lái)選擇元素，以便進(jìn)行CSS操作或者JavaScript操作。但是很多新手對(duì)id和class這兩個(gè)屬性感到很迷茫，不知道什么時(shí)候用id，什么時(shí)候用class，甚至隨便使用。

1.4.1　id屬性
id屬性具有唯一性，也就是說(shuō)在一個(gè)頁(yè)面中相同的id只允許出現(xiàn)一次。W3C建議，對(duì)于頁(yè)面關(guān)鍵的結(jié)構(gòu)或者大結(jié)構(gòu)，我們才使用id。所謂的關(guān)鍵結(jié)構(gòu)，指的是諸如LOGO、導(dǎo)航、主體內(nèi)容、底部信息欄等結(jié)構(gòu)。對(duì)于一些小地方，還是建議使用class屬性。

我們知道搜索引擎識(shí)別一個(gè)頁(yè)面結(jié)構(gòu)，是根據(jù)標(biāo)簽的語(yǔ)義以及id屬性來(lái)識(shí)別的。因此id屬性不要輕易使用。此外，id的命名也十分關(guān)鍵，特別是對(duì)搜索引擎優(yōu)化而言。對(duì)于id和class的命名，我們?cè)贑SS進(jìn)階部分會(huì)詳細(xì)介紹。

1.4.2　class屬性
class，顧名思義，就是“類”。它采用的思想跟C、Java等編程語(yǔ)言中的“類”相似。我們可以為同一個(gè)頁(yè)面的相同元素或者不同元素設(shè)置相同的class，然后使得相同class的元素具有相同的CSS樣式。

如果你要為兩個(gè)或者兩個(gè)以上元素定義相同的樣式，建議使用class屬性。因?yàn)檫@樣可以減少大量的重復(fù)代碼。

注意，對(duì)于一個(gè)元素而言，我們可以定義多個(gè)class。一般來(lái)說(shuō)，定義多個(gè)class的目的在于：一般用一個(gè)class抽取公共樣式，然后用另外一個(gè)class定義單獨(dú)樣式。

舉個(gè)例子，在一個(gè)頁(yè)面中有如圖1-2所示的三個(gè)欄目，仔細(xì)分析我們會(huì)發(fā)現(xiàn)這三個(gè)欄目具有部分相同樣式，此時(shí)我們可以使用一個(gè)class來(lái)定義公共樣式，但是這三個(gè)欄目又有各自的樣式。該怎么辦呢？這時(shí)候我們應(yīng)該為這三個(gè)欄目分別定義不同的class，以便在CSS中控制單獨(dú)的樣式。這就是多個(gè)class的用處。

https://yqfile.alicdn.com/d6241c1118424f4480e5a7086f73610a0047d816.png" >

上圖的三個(gè)欄目的HTML關(guān)鍵結(jié)構(gòu)如下：

<div class="column blog"><h2></h2><div></div> </div> <div class="column manual"><h2></h2><div></div> </div> <div class="column tool"><h2></h2><div></div> </div>

對(duì)于id和class，我們總結(jié)一下：對(duì)于頁(yè)面關(guān)鍵結(jié)構(gòu)，建議使用id；對(duì)于小地方，建議使用class。就算我們不需要對(duì)關(guān)鍵結(jié)構(gòu)進(jìn)行CSS操作或者JavaScript操作，也建議加上id，以便搜索引擎識(shí)別頁(yè)面結(jié)構(gòu)。

總結(jié)

以上是生活随笔為你收集整理的《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。