第一等級：代表 內聯樣式，如 style=""，權值為 1,0,0,0； 第二等級：代表 ID選擇器，如 #id="", 權值為 0,1,0,0； 第三等級：代表 calss | 偽類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權值 0,0 ...
第一等級：代表 內聯樣式，如 style=""，權值為 1,0,0,0；
第二等級：代表 ID選擇器，如 #id="", 權值為 0,1,0,0；
第三等級：代表 calss | 偽類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權值 0,0,1,0；
第四等級：代表 標簽 | 偽元素 選擇器，如 p | ::after, ::before, ::fist-inline, ::selection, 權值 0,0,0,1；
此外，通用選擇器（*），子選擇器（>）， 相鄰同胞選擇器（+）等選擇器不在4等級之內，所以它們的權值都為 0,0,0,0；
權值計算 公式：
權值 = 第一等級選擇器*個數，第二等級選擇器*個數，第三等級選擇器*個數，第四等級選擇器*個數；
權值比較 規則：
當兩個權值進行比較的時候，是從高到低逐級將等級位上的權重值（如 權值 1,0,0,0 對應--> 第一等級權重值，第二等級權重值，第三等級權重值，第四等級權重值）來進行比較的，而不是簡單的 1000*個數 + 100*個數 + 10*個數 + 1*個數 的總和來進行比較的，換句話說，低等級的選擇器，個數再多也不會越等級超過高等級的選擇器的優先順序的;
總結，這個比較規則就是三點
1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推；
2.完全相同的話，就採用 後者優先原則（也就是樣式覆蓋）；
3.css屬性後面加 !important 時，無條件絕對優先（比內聯樣式還要優先）；
選擇器的優先順序：
通過上邊的分析 我們就得出了單個選擇器的優先順序比較：
css屬性!important
》內聯樣式
》ID選擇器(#id)
》類選擇器(.class) = 偽類選擇器(:hover等) = 屬性選擇器[type等]
》元素選擇器(p等) = 偽元素選擇器(:after/:before/::selection等)
》通用選擇器(*)
》繼承的樣式
在vue中比如你要使用css控制element中的元素這時候就要使用/deep/,但有的編輯器這樣寫可以運行但會出紅線，比如vsCode。在vsCode中儘量使用::v-deep
