? ? ? ? ? ? ? 第一等級(jí)：代表 內(nèi)聯(lián)樣式，如 style=""，權(quán)值為 1,0,0,0；

　　　　第二等級(jí)：代表 ID選擇器，如 #id="", 權(quán)值為 0,1,0,0；

　　　　第三等級(jí)：代表 calss | 偽類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權(quán)值 0,0,1,0；

　　　　第四等級(jí)：代表 標(biāo)簽 | 偽元素 選擇器，如 p | ::after, ::before, ::fist-inline, ::selection, 權(quán)值 0,0,0,1；

　　　　此外，通用選擇器（*），子選擇器（>）， 相鄰?fù)x擇器（+）等選擇器不在4等級(jí)之內(nèi)，所以它們的權(quán)值都為 0,0,0,0；

?

? ? ? ?權(quán)值計(jì)算 公式：

　　　　權(quán)值 = 第一等級(jí)選擇器*個(gè)數(shù)，第二等級(jí)選擇器*個(gè)數(shù)，第三等級(jí)選擇器*個(gè)數(shù)，第四等級(jí)選擇器*個(gè)數(shù)；

?

　　權(quán)值比較 規(guī)則：

　　　　當(dāng)兩個(gè)權(quán)值進(jìn)行比較的時(shí)候，是從高到低逐級(jí)將等級(jí)位上的權(quán)重值（如 權(quán)值 1,0,0,0 對(duì)應(yīng)-->?第一等級(jí)權(quán)重值，第二等級(jí)權(quán)重值，第三等級(jí)權(quán)重值，第四等級(jí)權(quán)重值）來(lái)進(jìn)行比較的，而不是簡(jiǎn)單的 1000*個(gè)數(shù) + 100*個(gè)數(shù) + 10*個(gè)數(shù) + 1*個(gè)數(shù) 的總和來(lái)進(jìn)行比較的，換句話說(shuō)，低等級(jí)的選擇器，個(gè)數(shù)再多也不會(huì)越等級(jí)超過(guò)高等級(jí)的選擇器的優(yōu)先級(jí)的;

?

? ? ? ?總結(jié)，這個(gè)比較規(guī)則就是三點(diǎn)

　　　　1.先從高等級(jí)進(jìn)行比較，高等級(jí)相同時(shí)，再比較低等級(jí)的，以此類推；

　　　　2.完全相同的話，就采用 后者優(yōu)先原則（也就是樣式覆蓋）；

　　　　3.css屬性后面加 !important 時(shí)，無(wú)條件絕對(duì)優(yōu)先（比內(nèi)聯(lián)樣式還要優(yōu)先）；

?

? ? ?選擇器的優(yōu)先級(jí)：

? ? ? 通過(guò)上邊的分析 我們就得出了單個(gè)選擇器的優(yōu)先級(jí)比較：

　　css屬性!important

　　》內(nèi)聯(lián)樣式?

　　》ID選擇器(#id)

　　》類選擇器(.class) = 偽類選擇器(:hover等) = 屬性選擇器[type等]?

　　》元素選擇器(p等) = 偽元素選擇器(:after/:before/::selection等)?

　　》通用選擇器(*)?

　　》繼承的樣式

?

在vue中比如你要使用css控制element中的元素這時(shí)候就要使用/deep/,但有的編輯器這樣寫(xiě)可以運(yùn)行但會(huì)出紅線，比如vsCode。在vsCode中盡量使用::v-deep

?