為什麼「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 這位大神的文章
以上就是這次的問題,我們下次見!