ID 和 Class 選擇器 ( 類別選擇器 )

ID 選擇器和 Class 選擇器 ( 類別選擇器 ) 也是常見的選擇器，可以選取特定 ID 或 Class 的元素，方便網頁設計師或工程師精準控制樣式，這篇教學會介紹 ID 和 Class 選擇器。

延伸閱讀：ID、Class 與屬性命名原則

快速導覽：

• ID 選擇器
• Class 選擇器 ( 類別選擇器 )
• 多重 Class 選擇器

ID 選擇器

ID 選擇器使用「#」開頭，會選取 HTML 裡具有「id」屬性的元素，id 名稱「區分大小寫」，基本寫法如下：

<!-- HTML 程式碼 -->
<h1 id="oxxo">OXXO.STUDIO</h1>
<h2 id="hello">Hello World!!</h2>

<!-- CSS 程式碼 -->
<style>
  #oxxo {color: red;}
  #hello {color: orange;}
</style>

由於一份 HTML 文件裡，同一個 ID 只會出現一次 ( 如果出現重複的 ID 一定是 HTML 寫錯 )，所以 ID 選擇器是 CSS 所有選擇器裡「權重最大」的選擇器，其權重僅次於 HTML 的行內樣式與套用 !important 的屬性，也因為這個特性，通常會「獨立撰寫」ID 選擇器，或將 ID 選擇器放置於整串結構選擇器的「最前方」。

由於許多開發者會使用 SASS 與 LASS 等 CSS 預處理器撰寫 CSS，所以越來越常見到 ID 選擇器放在其他選擇器之下的狀況，雖然不影響執行結果，但在架構上仍建議直接使用正規寫法。

正規 ID 選擇器寫法：

#oxxo {color: red;}
#oxxo span {color: orange;}

非正規 ID 選擇器寫法：

div #oxxo {color: red;}
div span #oxxo {color: red;}

Class 選擇器 ( 類別選擇器 )

Class 選擇器使用「.」開頭，會選取 HTML 裡具有「class」屬性的元素，class 名稱「區分大小寫」，基本寫法如下：

<!-- HTML 程式碼 -->
<h1 class="oxxo">OXXO.STUDIO</h1>
<h2 class="hello">Hello World!!</h2>

<!-- CSS 程式碼 -->
<style>
  .oxxo {color: red;}
  .hello {color: orange;}
</style>

由於 class 屬於可以「重複出現」的屬性，一份 HTML 文件裡可能會出現多個同名的 class，所以有時會將「標籤」和「class」結合，變成更有指向性的 class 選擇器，以下方的 CSS 為例，如果只是設定「.oxxo」的樣式，會造成所有具有 oxxo 類別的元素都變成紅色文字，但如果設定「h2.oxxo」，就能明確表示具有 oxxo 類別的 h2 元素才會變成紅色文字。

所有同名 class 都會套用的寫法：

.oxxo {color: red;}

只有具有特定 class 的 h2 才會套用的寫法：

h2.oxxo {color: red;}

多重 Class 選擇器

撰寫 HTML 時，常常會將某個元素，套用多個 class，因此 CSS 的 class 選擇器也支援「多重 class 選擇器」，只要將 class 名稱串連，就能明確指向「同時具有這些 class 名稱」的元素，撰寫時需要注意 class 名稱間「不能有空白」，因為有空白就表示「子元素」。

不正確寫法：

.a .b .c {color: red;}     /* .b 是 .a 的子元素，.c 是 .b 的子元素 */

正確寫法：

.a.b.c {color: red;}

舉例來說，h1 元素同時具有 a、b、c 三個 class，h2 元素則同時具有 a、c 兩個 class，透過多重 class 選擇器就能精準控制 h1 和 h2 元素的樣式，也由於 .a.b.c 的權重為 0-3-0，.a.c 的權重為 0-2-0，所以 h1 不會被 .a.c 影響，最後就會呈現紅色，而 h2 因為沒有 .b，就會採用 .a.c 的樣式而呈現藍色。

多重 Class 選擇器串連後的權重，會按照權重計算原則進行相加，參考「CSS 選擇器的優先順序 ( 權重 )」

<!-- HTML 程式碼 -->
<h1 class="a b c">OXXO.STUDIO</h1>
<h2 class="a c">Hello World!!!</h1>

<!-- CSS 程式碼 -->
<style>
  .a.b.c {color: red;}
  .a.c {color: blue;}
</style>

小結

ID 選擇器和 Class 選擇器都是非常基本且常用的 CSS 選擇器，使用上僅需注意 ID 選擇器的權重最大，以及 Class 選擇器多重套用的原則，其他使用上就如同元素選擇器一樣容易上手喔。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～