《Web前端開發精品課 HTML與CSS進階教程》——1.4 id和class

本節書摘來自異步社群《web前端開發精品課 html與css進階教程》一書中的第1章，第1.4節，作者： 莫振傑 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

id和class是html元素中兩個最基本的公共屬性。一般情況下，id和class都用來選擇元素，以便進行css操作或者javascript操作。但是很多新手對id和class這兩個屬性感到很迷茫，不知道什麼時候用id，什麼時候用class，甚至随便使用。

1.4.1　id屬性

id屬性具有唯一性，也就是說在一個頁面中相同的id隻允許出現一次。w3c建議，對于頁面關鍵的結構或者大結構，我們才使用id。所謂的關鍵結構，指的是諸如logo、導航、主體内容、底部資訊欄等結構。對于一些小地方，還是建議使用class屬性。

我們知道搜尋引擎識别一個頁面結構，是根據标簽的語義以及id屬性來識别的。是以id屬性不要輕易使用。此外，id的命名也十分關鍵，特别是對搜尋引擎優化而言。對于id和class的命名，我們在css進階部分會詳細介紹。

1.4.2　class屬性

class，顧名思義，就是“類”。它采用的思想跟c、java等程式設計語言中的“類”相似。我們可以為同一個頁面的相同元素或者不同元素設定相同的class，然後使得相同class的元素具有相同的css樣式。

如果你要為兩個或者兩個以上元素定義相同的樣式，建議使用class屬性。因為這樣可以減少大量的重複代碼。

注意，對于一個元素而言，我們可以定義多個class。一般來說，定義多個class的目的在于：一般用一個class抽取公共樣式，然後用另外一個class定義單獨樣式。

舉個例子，在一個頁面中有如圖1-2所示的三個欄目，仔細分析我們會發現這三個欄目具有部分相同樣式，此時我們可以使用一個class來定義公共樣式，但是這三個欄目又有各自的樣式。該怎麼辦呢？這時候我們應該為這三個欄目分别定義不同的class，以便在css中控制單獨的樣式。這就是多個class的用處。

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

上圖的三個欄目的html關鍵結構如下：

對于id和class，我們總結一下：對于頁面關鍵結構，建議使用id；對于小地方，建議使用class。就算我們不需要對關鍵結構進行css操作或者javascript操作，也建議加上id，以便搜尋引擎識别頁面結構。