上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！

類選擇器（Class Selectors）是前端切版最常使用到的選擇器，根據 HTML 元素的 class 屬性值來選擇特定的元素，其中 class 就有「類別」的含義。

類選擇器的主要優勢在於其高度的重用性——不同的元素可以使用相同的類名，這使得樣式的維護更加方便，也使 HTML 結構更具靈活性。

💠 類選擇器-基本用法

1
2
3

<p class="text">我是 class 為 text 的 P 標籤</p>
<p class="orange-text">我是 class 為 orange-text 的 P 標籤</p>
<div class="text">我是 class 為 text 的 DIV 標籤</div>

新增 class 屬性：在 HTML 元素中新增 class 屬性，其值為你想設定的類名。

.text {
  background-color: lightblue;
  padding: 10px;
}

.orange-text {
  color: orange;
}

CSS 設定：使用 . 來指定類選擇器。例如，如果類名是 text，則相應的 CSS 選擇器為 .text。

從上面的範例可以看到，儘管 <p class="text"> 和 <div class="text"> 是不同的 HTML 元素，但它們都使用了相同的類名 text，因此它們的樣式設定是一致的。

💠 多個類別

同一個元素可以擁有多個類別，我們能夠在不同的元素上共享相同的樣式，同時添加特定的樣式。

以下面的紅綠燈樣式範例來說，紅燈、綠燈、黃燈會有相同的寬高、且都是圓形的，但就差在顏色不一樣，因此我們可以這樣寫：

1
2
3

<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.red {
  background-color: #d71919;
}

.yellow {
  background-color: #ffe100;
}

.green {
  background-color: #05a005;
}

See the Pen Class selectors-2 by Lala (@bobee) on CodePen.

這樣的寫法可以讓樣式的管理更加靈活和高效，也不需要個別設置一堆基本樣式啦！

💠 類別命名規則

class 的命名是有規範的，可遵循以下規則：

允許的字符：類名可以包含字母（a-z, A-Z）、數字（0-9）、底線 _ 和連字號 -
例如：main-header 或 section_1
開頭字符限制：類名不能以數字開頭
例如：123header 是不合法的，應該使用 header123
空格和大小寫：類名不能包含空格，並且區分大小寫
例如：myClass 和 myclass 被視為不同的類名
描述性：類名應具有描述性，以提高程式碼的可讀性和可維護性
例如：side-menu 比 sm 更能表達意圖