CSS選擇器class跟id有什麼區別？ HTML中id和class用法

CSS選擇器class跟id有什麼區別？ HTML中id和class用法

陳溈亮最近在執行SEO，優化網站的WordPress主題。

雖然之前有學過一些基礎的HTML 和CSS 知識，但是一段時間沒有操作，尤其是CSS部分用法，很容易忘記。

所以，在此記錄、總結CSS 選擇器id、class 的區別和用法：

• id 對應#div
• class 對應.div

id 和class 的區別

id 說明

• id是固定標籤，用來定義網頁中，較大的樣式，用#div 的形式來定義
• 比如：劃分欄目、頂部、正文、底部等……
• 用於定義一個特定的元素，每個頁面只能出現一次，不能反複調用。

class 說明

• class是樣式組，用來定義網頁中，比較細節的樣式，用.div的形式來定義，可以重複出現
• 比如：具體的一個菜單、一行文字等……
• 在同一個頁面，可以被多個元素反複調用

div選擇器本身不具有屬性，通過定義它的css，來控制這個div的寬度、高度、背景顏色和文字大小等等的一些佈局。

一般的電子商務網站、蓋站程序生成的html 網頁，就是通過CSS，來實現頁面佈局的。

什麼是選擇器？

每個CSS樣式的定義，都是由2個部分組成：

选择器 {样式}

• 在{} 之前的部分，就是“選擇器”。
• “選擇器” 表明了{} 的“樣式” 作用對象。
• 意即該“樣式” 是在網頁的哪個元素起作用？

代碼實例

以下是選擇和設置class=”sidebar” 元素的樣式：

.sidebar
{ 
background-color:black;
}

以下是選擇和設置id=”footer” 的元素樣式：

#footer
{ 
background-color:black;
}