!Css的優(yōu)先級
2022-05-31 17:23:16

每天一記：

首先：　　　　　　　　!import的樣式優(yōu)先級高于一切

?

Body中 優(yōu)先級：1.最近的祖先樣式比其他祖先樣式優(yōu)先級高。2.內聯樣式"比"祖先樣式"優(yōu)先級高

選擇器的優(yōu)先級上面討論了一個標簽從祖先繼承來的屬性，現在討論標簽自有的屬性。在討論 CSS 優(yōu)先級之前，先說說 CSS 7 種基礎的選擇器：

• ID 選擇器， 如 #id{}
• 類選擇器， 如 .class{}
• 屬性選擇器， 如 a[href="segmentfault.com"]{}
• 偽類選擇器， 如 :hover{}
• 偽元素選擇器， 如 ::before{}
• 標簽選擇器， 如 span{}
• 通配選擇器， 如 *{}

優(yōu)先級關系：內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器

計算選擇符中 ID 選擇器的個數（a），計算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個數之和（b），計算選擇符中標簽選擇器和偽元素選擇器的個數之和（c）。按 a、b、c 的順序依次比較大小，大的則優(yōu)先級高，相等則比較下一個。若最后兩個的選擇符中 a、b、c 都相等，則按照"就近原則"來判斷。

屬性后插有?!important?的屬性擁有最高優(yōu)先級。若同時插有?!important，則再利用規(guī)則 3、4 判斷優(yōu)先級。

?

作者：??咸瑜???