本文將介紹什么權(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>
