前端工程師看完這篇不要再問Class選擇器怎麼用了~

日期：
前端工程師看完這篇不要再問Class選擇器怎麼用了~

常常聽到有菜鳥前端工程師在問Class選擇器該怎麼用~ 看完這篇就學會啦!!

在這篇前端工程師的的CSS教學第一課中提到：Class 及 ID 都是使用者設定的選擇器 (selector)。ID 選擇器的說明如這篇，Class 選擇器的說明如下

Class 選擇器

前端工程師會用到的Class 的宣告法，是先放一個英文半形句點，再列出選擇器名稱。格式如下： 
Class 名稱 { 
屬性：設定值；
...
}
舉例來說，如我們要定義導覽列的顏色為代號「#0000FF」的顏色時，宣告的 CSS 如下： 
.navbar { 
color:#0000FF; 
...
}
要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼： 
<p class="navbar">這是用 Class 選擇器定義文字顏色為「#0000FF」純藍色的例子。</p>
以上宣告顯示如下：
這是用 Class 選擇器定義文字顏色為「#0000FF」純藍色的例子。
▶ 參考資料：HTML和CSS的網頁顏色代碼對照表 一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。語法如下： 
【型類選擇器】.【選擇器名稱】 { 
【型類選擇器】.【選擇器名稱】
...
}
舉例來說，如果出現以下的 CSS 宣告： 
b.special {
   color:#0000FF;
}

i.special {
   color:#000000;
}
就要把以上的樣式套用在 HTML 裡面，我們用以下的 HTML 碼： 
這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>
以上宣告顯示如下：
這個例子顯示出同一個選擇器可以有不同的 instance。.