聲明
本人也在不斷的學習和積累中，文章中有不足和誤導的地方還請見諒，可以給我留言指正。希望和大家共同進步，共建和諧學習環(huán)境。
一、樣式類型
?1、內(nèi)聯(lián)樣式
<div style="font-size:24px">世界那么大! 我想出去看看！</div>
?2、內(nèi)部樣式
<style>
div{font-size:24px;}
</style>
?3、外部樣式
<link href="demo.css" rel="stylesheet" type="text/css" />
二、權(quán)重計算規(guī)則
在CSS中，層疊優(yōu)先級不只是內(nèi)聯(lián)樣式> 內(nèi)部樣式表 > 外部樣式表 > 瀏覽器缺省，會根據(jù)選擇器的特殊性來決定所定義的樣式規(guī)則次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。那怎樣才能提升選擇器的特殊性值呢？
選擇器的特殊性值表述為4個部分，用0,0,0,0表示。
第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1,0,0,0。
第二等：代表ID選擇器，如：#content，權(quán)值為0,1,0,0。
第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0,0,1,0。
第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0,0,0,1。
注：通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0,0,0,0。繼承的樣式?jīng)]有權(quán)值。
例：
<style>
a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/
</style>
<a href="">第一條應(yīng)該是黃色</a> <!--適用第1行規(guī)則-->
<div class="demo">
<input type="text" value="第二條應(yīng)該是藍色" /><!--適用第4、5行規(guī)則，第4行優(yōu)先級高-->
<a href="">第三條應(yīng)該是黑色</a><!--適用第2、3行規(guī)則，第3行優(yōu)先級高-->
</div>
<div id="demo">
<a href="">第四條應(yīng)該是紅色</a><!--適用第5、6行規(guī)則，第6行優(yōu)先級高-->
</div>
同一個等級的特殊性只在同一位上相加。權(quán)重比較順序是從左向右逐個等級比較，前一等級相等才往后比。所以回答一下上面的問題——怎樣才能提升選擇器的特殊性值。最直接的方法就是增加更高級別的選擇器。
例如
??.demo .demo 此處省略7個.demo .demo{color:red} // 特殊性值：0,0,1*10,0 = 0,0,10,0
??#demo{color:green} // 特殊性值：0,1,0,0
??最后顯示的字體顏色是綠色。
三、!import
??為什么沒有把!import放在優(yōu)先級順序中，因為官方認為!import和優(yōu)先級沒一點關(guān)系。而且在項目當中，盡量少用!import，會給后期的維護帶來很大的困難。
- 絕不要在全站使用!import。
- 只在需要覆蓋全站或外部 css的特定頁面中使用 !important
- 永遠不要在你的插件中使用 !important
- 要優(yōu)先考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是 !important
注：如果已經(jīng)使用了!important，如何改變樣式呢？就是使用!important 的同時，再用上面說的擁有更高權(quán)重的選擇器進行覆蓋就行了。
