CSS的優先級是指在選擇器重復的情況下,哪個樣式將被應用于元素。這個優先級是根據三種選擇器權重進行計算的,它們分別是:
1. 行內樣式(內聯樣式) – 1000 2. ID選擇器 – 100 3. 類選擇器、屬性選擇器和偽類選擇器 – 10 4. 標簽選擇器、偽元素選擇器 – 1
當兩個或多個選擇器具有相同的權重時,它們將按照其在樣式表中出現的順序進行排序。以下是一些CSS優先級的示例:
/* 行內樣式優先級最高 */我是紅色的文本/* ID選擇器優先級次之 */
#demo {
color: blue;
}
/* class選擇器和屬性選擇器與偽類選擇器權重相同 */
p.info {
color: green;
}
input[type="text"] {
background-color: yellow;
}
/* 標簽選擇器和偽元素選擇器的權重最低 */
p {
font-size: 14px;
}
p::first-letter {
font-size: 20px;
}
在上面的示例中,如果我們將相同的樣式應用于元素,則優先級最高的樣式將被應用。例如,對于具有以下HTML標記的段落:
<p id="demo" class="info"></p>
最終的樣式將是藍色的文本,因為ID選擇器的權重(100)比類選擇器和屬性選擇器的權重(每個10)更高。如果我們將更改ID選擇器的顏色為紅色,則紅色的文本將被應用。
綜上所述,了解CSS優先級的概念及其如何計算可以幫助您更好地掌握CSS樣式表和如何編寫具有更高效率的CSS代碼。