為什麼「class」可以放兩個以上的名稱?

更新日期: 2024 年 9 月 14 日

乳題,我發現有人使用「class」時,會有超過兩個以上的名稱。

class=" name1 name2"

我很疑惑電腦遇到這種情況,要如何判斷何時要套用哪個名稱的 CSS 的樣式?


經過查詢,我發現這個問題的關鍵點,在於是否理解 css 選擇器的「唯一性」與「多重性」。

「唯一性」顧名思義擁有「單一特定」、「獨一無二」的特性,例如「id」選擇器就具有唯一性,因此若以 「id」幫「div」元素命名,div 元素只會有一種 id 名稱,不會有第二個 id 名稱。

html 部分
<div id="onlyone"> </div>

css 部分
#onlyone {
color:#FF00FF;
}

「多重性」則相反,它可以「多重套用」與「疊加」,例如「class」選擇器就有多重性,因此同一個 「class」 名稱可以套用到「p」、「a」、「div」等多種元素,同一個元素也可以疊加套用多種 class 樣式。

html 部分
<div class="name1 name2"></div>

css 部分
.name1 {
font-size:20px;
}

.name2{
 color:#FF0000;
}

以上我們了解「唯一性」與「多重性」的差別。

至於系統如何在多種名稱下,去判斷被命名的元素要如何套用各種樣式,則可以去參考 PJCHENder 這位大神的文章

以上就是這次的問題,我們下次見!

Similar Posts