css的優先順序和權重問題 以及!important優先順序
阿新 • • 發佈：2020-07-16
一，前言：
剛加的css怎麼沒有渲染出來？瀏覽器中檢視，發現是被其他的css給覆蓋了，相信我們都曾遇到過這樣的問題。那麼瀏覽器是如何選擇css標籤的渲染順序的呢？換句話說，css選擇器的優先順序是怎麼規定的？
二、正文：
先上一個例子
<div id = "outerId" class = "outerClass"> <div id = "innererId" class = "innerClass"> <p id = "thisId" class = "thisClass" style = "">這是一個CSS選擇器的測試</p>
<button type = "button" class = "buttonClass">按鈕</button> </div> </div>
問：有多少種css選擇器可以對<p>標籤樣式產生影響呢？
如果詳細的進行分析，排列組合有太多種了，太過麻煩。我們就說說有哪幾個類別：
- 行內樣式： 即 style = "font-size: 12px"；
- id選擇器： 即 #thisId {font-size: 12px;}
- class選擇器： 即 .thisClass{font-size: 12px;}
- 元素選擇器： 即 p {font-size: 12px;}
如上四種類別都可以對<p>標籤的樣式產生影響，那麼誰先誰後，誰打誰小呢？
有如下兩種解釋：
- 一個selector的權重表示方式：0.0.0.0，按照計算規則給每位填充數字，對應位置相等，則比較下一位；
- 也有分別以1000、100、10、1四個權值係數對CSS選擇器進行權重計算。
| 選擇器類別 | 說明 | 權重表示 | 權值表示 |
| 行內樣式 | 行內只有一個 style = "" | （1.0.0.0） | 1000 |
| id選擇器 | selector中使用了幾個id，即#的個數 | （0.1.0.0） | 100 |
| 類選擇器 |
類,偽類,以及屬性的個數 如： .outerClass .buttonClass[type="button"]:hover{} 選擇器中有2個類,1個屬性,1個偽類 |
（0.0.1.0） | 10 |
| 元素選擇器 |
偽元素和標籤元素的個數，如：p:first-child 選擇器中有一個標籤元素p和一個偽元素first-child |
（0.0.0.1） | 1 |
張鑫旭大神的256個class類名選擇器幹掉一個id選擇器例項頁面，我試了下256個好像也不行。。。
最後的幾點說明：
-
!important 表示強制應用該樣式，例如：button{width:150px!important;}，與以上的選擇器相遇時，強制使用此樣式；
-
如果比較後權重相同，那麼後者覆蓋前者，後渲染的勝出；
-
內聯樣式 > id選擇器樣式 > 類選擇器樣式 > 元素選擇器樣式；
-
CSS選擇器的使用，應該儘量避免使用 !important 和 內聯樣式；id通常也是與class區分開使用，前者多用於JS中的結點定位，後者多用於CSS選擇器。
-
重中之重，1000/100/10/1這種權值係數的比較方式只是便於理解，真實情況下10個class並不能逆轉1個id。