CSS 的選擇器是必學(xué)內(nèi)容,多種選擇器都有各自的用法,本篇文章來為您介紹選擇器的優(yōu)先級(jí)。
一、優(yōu)先級(jí)的分類
我們可以把 CSS 的優(yōu)先級(jí)從高到低來分成6級(jí):
第一級(jí)別:無優(yōu)先條件的屬性我們只要在屬性后添加 ?!important
?即可。這個(gè)屬性可以覆蓋此頁(yè)面所有位置定義的同種元素樣式。
第二級(jí)別:在元素標(biāo)簽內(nèi)直接添加 style ,俗稱內(nèi)聯(lián)樣式。
第三級(jí)別:ID 選擇器。例:#id{color:red;}
第四級(jí)別:類選擇器,屬性選擇器或者偽類選擇器。例:.one{color:blue;}
第五級(jí)別:元素選擇器。例:div{color:yellow;}
第六級(jí)別:統(tǒng)配選擇器。例:*{color:green;}
二、選擇器的權(quán)重和優(yōu)先規(guī)則
CSS 會(huì)依據(jù)選擇器其特殊性質(zhì)來規(guī)定它定義的樣式權(quán)重次序,在更特殊的選擇器權(quán)重優(yōu)先于一般選擇器的規(guī)則。如果有兩個(gè)相同特殊性的選擇器,那么后面定義的選擇器優(yōu)先。
如何去計(jì)算選擇器的特殊性?我們來試著計(jì)算一下選擇器的權(quán)重,如下圖:
如圖所示,我們把選擇器特殊性分為4個(gè)等級(jí),每個(gè)等級(jí)是一種選擇器,每個(gè)等級(jí)的值加起來就是該選擇器的權(quán)重。
四個(gè)等級(jí)定義如下:
第一級(jí):內(nèi)聯(lián)樣式,例:style="",它的權(quán)值為1000
第二級(jí):ID選擇器,例:#id,它的權(quán)值為100
第三級(jí):class選擇器,例:.one,它的權(quán)重為10
第四級(jí):元素選擇器,例:div,p,h1 ,它的權(quán)重為1
以上就是為大家整理的關(guān)于CSS選擇器權(quán)重優(yōu)先規(guī)則。