CSS樣式權重優先級規則說明

文中部分內容參考自：https://blog.csdn.net/yue_yue_moon/article/details/88828460

css優先級規則

1.css選擇規則的權值不同時，權值高的優先；

2.css選擇規則的權值相同時，後定義的規則優先；

3. css屬性後面加 !important 時，無條件絕對優先；

權值等級劃分， 一般來說是劃分4個等級：

第一等級：代表 內聯樣式，如 style=""，權值爲 1000；

第二等級：代表 ID選擇器，如 #id="", 權值爲 100；

第三等級：代表 calss | 僞類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權值 10；

第四等級：代表 標籤 | 僞元素 選擇器，如 p | ::after, ::before, ::fist-inline, ::selection, 權值 1；

此外，通用選擇器（*），子選擇器（>）， 相鄰同胞選擇器（+）等選擇器不在4等級之內，所以它們的權值都爲 0；

權重優先級

css屬性帶有 !important 優先級別最高

> 內聯樣式(style = " ")

> ID選擇器(#id)

> 類選擇器(.class) = 僞類選擇器(:hover等) = 屬性選擇器[type等]

> 元素選擇器(p等) = 僞元素選擇器(:after/:before/::selection等)

> 通用選擇器(*)

> 繼承的樣式
 

<ul class="authors" id="favorite">
    <li><span>Martin Fowler</span></li>
    <li id="related"><span class="highlight">Dijkstra</span></li>
</ul>

ul#related span{  //權重：1 + 100 + 1=102
    color:red;
}

#favorite.highlight{  //權重：100 + 10 = 110
    color:orange;
}

.highlight{  //權重：10
    color:black;
}