上一篇有講到,元素選擇器沒辦法讓相同的標籤進行不同的樣式,這時候就要靠類選擇器啦~!
類選擇器(Class Selectors)是前端切版最常使用到的選擇器,根據 HTML 元素的 class 屬性值來選擇特定的元素,其中 class 就有「類別」的含義。
類選擇器的主要優勢在於其高度的重用性——不同的元素可以使用相同的類名,這使得樣式的維護更加方便,也使 HTML 結構更具靈活性。
<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;
}
.
來指定類選擇器。例如,如果類名是 text
,則相應的 CSS 選擇器為 .text
。從上面的範例可以看到,儘管 <p class="text">
和 <div class="text">
是不同的 HTML 元素,但它們都使用了相同的類名 text
,因此它們的樣式設定是一致的。
同一個元素可以擁有多個類別,我們能夠在不同的元素上共享相同的樣式,同時添加特定的樣式。
以下面的紅綠燈樣式範例來說,紅燈、綠燈、黃燈會有相同的寬高、且都是圓形的,但就差在顏色不一樣,因此我們可以這樣寫:
<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;
}
範例:[CODEPEN]
這樣的寫法可以讓樣式的管理更加靈活和高效,也不需要個別設置一堆基本樣式啦!
class 的命名是有規範的,可遵循以下規則:
_
和連字號 ``。例如:main-header
或 section_1
。123header
是不合法的,應該使用 header123
。myClass
和 myclass
被視為不同的類名。side-menu
比 sm
更能表達意圖。