CSS優(yōu)先級(jí)是根據(jù)等級(jí)的值相加得出選擇器的權(quán)重來(lái)決定的古瓤。
!important > 行內(nèi)樣式 > ID > 類(lèi)、偽類(lèi)亮靴、屬性 > 標(biāo)簽名 > 繼承 > 通配符
計(jì)算權(quán)重方式:
從圖上看講權(quán)重分為:
1.?第一等:代表內(nèi)聯(lián)樣式馍盟,如: style=””,權(quán)值為1000茧吊。
2.?第二等:代表ID選擇器贞岭,如:#content,權(quán)值為0100饱狂。
3.?第三等:代表類(lèi)曹步,偽類(lèi)和屬性選擇器宪彩,如.content休讳,權(quán)值為0010。
4.?第四等:代表類(lèi)型選擇器和偽元素選擇器尿孔,如div p俊柔,權(quán)值為0001筹麸。
5.?通配符、子選擇器雏婶、相鄰選擇器等的物赶。如*、>留晚、+,權(quán)值為0000酵紫。
6.?繼承的樣式?jīng)]有權(quán)值。
當(dāng)權(quán)重一樣時(shí)遵循準(zhǔn)則:
1. 選擇器越具體優(yōu)先級(jí)越高
2.?在同一個(gè)級(jí)別的情況下错维,最后指定的規(guī)則優(yōu)先級(jí)就越高奖地,也就是我們通常說(shuō)的就近原則;
權(quán)重計(jì)算例子:
1. li? -> 0 0 0 1 權(quán)重為 1
2.?h1?+ *[rel=up] ->0 0 1 1 這個(gè)相鄰選擇器由標(biāo)簽選擇器與屬性選擇器組成赋焕,屬性選擇器為10参歹,因此權(quán)重為11
3.?ul ol li.red -> 0 0 1 3 權(quán)重為13
4 li.red.level -> 0 0 2 1 權(quán)重21
CSS樣式優(yōu)先級(jí):
1. !important? (width: 100% !important)
2. 行內(nèi)樣式? ?(style="width:100%")
3. id選擇器? (#myIdName)
4. class選擇器? (.myClassName)
5. 標(biāo)簽選擇器? (div,h1,p)
CSS穿透,穿透主要是指修改框架樣式隆判。修改方式如下:
1. 使用 " >>> " 符號(hào)犬庇,這種方式主要是用于普通css,方式為:
? 外層 >>> 第三方組件樣式:?.wrapper >>> .swiper-pagination { color: #eee? }
2.?使用 "/deep/",這種方式主要用于sass或less侨嘀,方式為:
外層 /deep/ 第三方組件樣式:?.wrapper /deep/ .swiper-pagination { color: #eee? }