每天一記:
首先: !import的樣式優(yōu)先級高于一切
?
Body中 優(yōu)先級:1.最近的祖先樣式比其他祖先樣式優(yōu)先級高。2.內(nèi)聯(lián)樣式"比"祖先樣式"優(yōu)先級高
選擇器的優(yōu)先級上面討論了一個(gè)標(biāo)簽從祖先繼承來的屬性,現(xiàn)在討論標(biāo)簽自有的屬性。在討論 CSS 優(yōu)先級之前,先說說 CSS 7 種基礎(chǔ)的選擇器:
- ID 選擇器, 如 #id{}
- 類選擇器, 如 .class{}
- 屬性選擇器, 如 a[href="segmentfault.com"]{}
- 偽類選擇器, 如 :hover{}
- 偽元素選擇器, 如 ::before{}
- 標(biāo)簽選擇器, 如 span{}
- 通配選擇器, 如 *{}
優(yōu)先級關(guān)系:內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器
計(jì)算選擇符中 ID 選擇器的個(gè)數(shù)(a),計(jì)算選擇符中類選擇器、屬性選擇器以及偽類選擇器的個(gè)數(shù)之和(b),計(jì)算選擇符中標(biāo)簽選擇器和偽元素選擇器的個(gè)數(shù)之和(c)。按 a、b、c 的順序依次比較大小,大的則優(yōu)先級高,相等則比較下一個(gè)。若最后兩個(gè)的選擇符中 a、b、c 都相等,則按照"就近原則"來判斷。
屬性后插有?!important?的屬性擁有最高優(yōu)先級。若同時(shí)插有?!important,則再利用規(guī)則 3、4 判斷優(yōu)先級。
?
作者:??咸瑜???
本文摘自 :https://blog.51cto.com/u