本文將介紹什么權(quán)重計(jì)算規(guī)則倒信。
參考文章:CSS 選擇器權(quán)重計(jì)算規(guī)則
參考文章:css樣式權(quán)重優(yōu)先級(jí),css樣式優(yōu)先級(jí)
在計(jì)算權(quán)重之前首先必須有以下基礎(chǔ):
一山涡、樣式類型:行間(行內(nèi)) 樣式堤结,內(nèi)聯(lián)(內(nèi)部)樣式,(外聯(lián))外部樣式鸭丛。
二竞穷、選擇器的類型:id,class,標(biāo)簽,屬性鳞溉,*瘾带,偽類,偽元素熟菲,后代選擇器看政,子類選擇器,相鄰選擇器
權(quán)重計(jì)算規(guī)則:
1抄罕、第一優(yōu)先級(jí):無(wú)條件優(yōu)先的屬性只需要在屬性后面使用!important允蚣。它會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。(ie6支持上有些bug)呆贿。
2嚷兔、第一等:內(nèi)聯(lián)樣式森渐,如:style="color:red;",權(quán)值為1000.(該方法會(huì)造成css難以管理冒晰,所以不推薦使用)
3同衣、第二等:ID選擇器,如:#header壶运,權(quán)值為0100.
4耐齐、第三等:類、偽類蒋情、屬性選擇器如:.bar埠况, 權(quán)值為0010.
5、第四等:標(biāo)簽恕出、偽元素選擇器询枚,如:div ::first-line 權(quán)值為0001.
6、通配符浙巫,子選擇器金蜀,相鄰選擇器等。如*的畴,>,+, 權(quán)值為0000.
7渊抄、繼承的樣式?jīng)]有權(quán)值。
權(quán)重計(jì)算規(guī)則舉例(19-12-02)
- important的權(quán)重為1,0,0,0
- ID的權(quán)重為0,1,0,0
- 類的權(quán)重為0,0,1,0
- 偽類的權(quán)重為0,0,1,0
- 屬性的權(quán)重為0,0,1,0
- 標(biāo)簽的權(quán)重為0,0,0,1
- 偽對(duì)象的權(quán)重為0,0,0,1
- 通配符的權(quán)重為0,0,0,0
比較的規(guī)則
1丧裁、1000>09999:從左往右逐個(gè)等級(jí)比較护桦,前一等級(jí)相等才能往后比較(1000與09999對(duì)比的時(shí)候需要補(bǔ)位,即10000>09999)煎娇。
2二庵、無(wú)論是行內(nèi),內(nèi)部缓呛,外部樣式催享,都是按照以上的權(quán)重方式進(jìn)行比較。面試的時(shí)候經(jīng)常會(huì)遇見(jiàn)優(yōu)先級(jí)比較哟绊,而答案往往是:行間>內(nèi)部>外部因妙;id>class>元素(標(biāo)簽),不能說(shuō)是錯(cuò)的也不能說(shuō)是對(duì)的,只能說(shuō)是錯(cuò)覺(jué)票髓,但是錯(cuò)覺(jué)也有錯(cuò)攀涵,比如對(duì)同一個(gè)元素操作且權(quán)重相等,先寫內(nèi)部樣式洽沟,再引用外部樣式以故,這時(shí)候由于層疊樣式的關(guān)系顯示出來(lái)的是外部樣式,即:外部樣式>內(nèi)部樣式裆操。
3怒详、權(quán)重相同的情況先鳄乏,后寫的顏色會(huì)覆蓋前寫的樣式。
4棘利、通配符,子選擇器朽缴,相鄰選擇器善玫,雖然權(quán)重為0000,但是比繼承的樣式優(yōu)先
實(shí)例
a{color: yellow;} /*權(quán)值:0,0,0,1*/
div a{color: green;} /*權(quán)值:0,0,0,2*/
.demo a{color: black;} /*權(quán)值:0,0,1,1*/
.demo input[type="text"]{color: blue;} /*權(quán)值:0,0,2,1*/
.demo *[type="text"]{color: grey;} /*權(quán)值:0,0,2,0*/
#demo a{color: orange;} /*權(quán)值:0,1,0,1*/
div#demo a{color: red;} /*權(quán)值:0,1,0,2*/
<a href="">第一條應(yīng)該是黃色</a> <!-適用第1行規(guī)則->
<div class="demo">
<input type="text" value="第二條應(yīng)該是藍(lán)色" /><!-適用第4密强、5行規(guī)則茅郎,第4行優(yōu)先級(jí)高->
<a href="">第三條應(yīng)該是黑色</a><!-適用第2、3行規(guī)則或渤,第3行優(yōu)先級(jí)高->
</div>
<div id="demo">
<a href="">第四條應(yīng)該是紅色</a><!-適用第5系冗、6行規(guī)則,第6行優(yōu)先級(jí)高->
</div>