本文將介紹什么權(quán)重計(jì)算規(guī)則。
參考文章：CSS 選擇器權(quán)重計(jì)算規(guī)則
參考文章：css樣式權(quán)重優(yōu)先級(jí)，css樣式優(yōu)先級(jí)
在計(jì)算權(quán)重之前首先必須有以下基礎(chǔ)：
一、樣式類(lèi)型：行間（行內(nèi)） 樣式，內(nèi)聯(lián)（內(nèi)部）樣式，（外聯(lián)）外部樣式。
二、選擇器的類(lèi)型：id,class,標(biāo)簽，屬性，*，偽類(lèi)，偽元素，后代選擇器，子類(lèi)選擇器，相鄰選擇器
權(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、第三等：類(lèi)、偽類(lèi)、屬性選擇器如：.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
- 類(lèi)的權(quán)重為0,0,1,0
- 偽類(lèi)的權(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)重相等，先寫(xiě)內(nèi)部樣式，再引用外部樣式，這時(shí)候由于層疊樣式的關(guān)系顯示出來(lái)的是外部樣式，即：外部樣式>內(nèi)部樣式。
3、權(quán)重相同的情況先，后寫(xiě)的顏色會(huì)覆蓋前寫(xiě)的樣式。
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>
