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

更新日期： 2021 年 6 月 30 日

乳題，我發現有人使用「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　這位大神的文章

以上就是這次的問題，我們下次見！