關(guān)于css權(quán)重，前端開發(fā)者大概能想到：!important優(yōu)先級(jí)最高，內(nèi)聯(lián)樣式次之军拟，然后是css樣式文件顯示最后的樣式選擇器。</br>
?周末看了《CSS權(quán)威指南》的第三章-結(jié)構(gòu)和層疊誓禁，感觸很深懈息。整理了一下讀書筆記，分享給大家摹恰！</br>
?頁面顯示樣式的優(yōu)先級(jí)取決于其“特殊性”’辫继，特殊性越高，就顯示最高的俗慈，當(dāng)特殊性相等時(shí)姑宽，顯示后者。只要弄明白特殊性的高低闺阱，對于選擇器的權(quán)重就能迎刃而解炮车。</br>
?三觀重塑從特殊性的概念開始，非常重要！特殊性表述為4個(gè)部分：0,0,0,0示血。一個(gè)選擇器的特殊性如下確定：
??1.對于選擇器是#id的屬性值,特殊性值為：0,1,0,0
??2.對于屬性選擇器棋傍、class或偽類，特殊性值為：0,0,1,0
** ??3.對于標(biāo)簽選擇器或偽元素难审，特殊性值為：0,0,0,1**
** ??4.通配符‘*’對特殊性值為：0,0,0,0 所以通配符對與選擇器來說不會(huì)影響其特殊性值瘫拣，但對繼承屬性的時(shí)候會(huì)有影響，后面會(huì)講解告喊。**
例如：
h1{color:red;} /* specificity = 0,0,0,1 */
p em{color: purple;} /* specificity = 0,0,0,2 */
.grape{color:purple;} /* specificity = 0,0,1,0 */
*.bright{color:yellow;} /* specificity = 0,0,1,0 */
p.bright em.dark{color:maroon;} /* specificity = 0,0,2,2 */ **
#id216 {color:blue;} /* specificity = 0,1,0,0 */
div#sidebar *[href] {color:silver;} /* specificity = 0,1,1,1 */ ******
這里的4部分特殊性的值沒有所謂的進(jìn)位麸拄，從左往右比較，比如：0,1,0,0 比 0,0,6,7大黔姜，所以0,1,0,0的優(yōu)先級(jí)更高拢切。
通過上面的解釋，應(yīng)該能明白特殊性值的取值秆吵，下面通過幾個(gè)有代表性的例子來重塑你的三觀淮椰！
h1.title{color:blue} /* specificity = 0,0,1,1 */
.title{color:red;} /* specificity = 0,0,1,0 */
<h1 class="title">hello world</h1>
這個(gè)h1標(biāo)題的字體顏色就是blue，因?yàn)樗奶厥庑灾蹈吣杉拧＃ㄒ恍┏鯇W(xué)者以為當(dāng)這種情況的時(shí)候顯示后者主穗，其實(shí)和選擇器在css文件的位置無關(guān)！１形摺：雒健）
#side-content{color:black;} /* specificity = 0,1,0,0 */
html>body ul li[name="list"] {color:white;} /* specificity = 0,0,1,4 */
<li id="side-content">側(cè)邊欄列表</li>
這里 li 的字體顏色是black，因?yàn)樘厥庑灾底罡摺?br> 最前面0開頭的特殊性腋粥，第一個(gè)位置是留給內(nèi)聯(lián)樣式的晦雨，所以當(dāng)出現(xiàn)如下的時(shí)候，內(nèi)聯(lián)樣式的特殊性值高
body#box{background:red;} /* specificity = 0,1,0,1 */
<body style="background:blue"></body> /* specificity = 1,0,0,0 */
背景色顯示blue
還有一個(gè)超凡脫俗的隘冲，換上神裝的聲明：!important 闹瞧。它的優(yōu)先級(jí)最高，直接鄙視前面講的特殊性值展辞！當(dāng)出現(xiàn) !important聲明屬性時(shí)奥邮，顯示 !important聲明的屬性。
?關(guān)于通配符“*”的特殊性值：0,0,0,0 雖然對其他選擇器沒有影響纵竖，但是對繼承屬性還是有作用的漠烧，比如：
<p>hello <em>world</em></p>
*{color:gray}
p{color:red}
因?yàn)閏olor屬性具有繼承特性，p聲明了顏色為red靡砌，em標(biāo)簽也繼承了color：red已脓；雖然通配符的特殊性值為0，但是有總比沒有強(qiáng)(我對這種解釋其實(shí)無語的通殃，但是我也不知道怎么解釋度液，只能搬書上的一句話了)厕宗。所以通配符“*”比繼承特性的優(yōu)先級(jí)高，如下圖堕担。
<img src="http://upload-images.jianshu.io/upload_images/2711211-ab01ebb57f30e732.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="200" height="200" alt="繼承和通配符優(yōu)先級(jí)" >
最后一個(gè)就是當(dāng)特殊性相等的時(shí)候：
h1{color:red;} /* specificity = 0,0,0,1 */
h1{color:blue}/* specificity = 0,0,0,1 */
顯示后者已慢，頁面h1字體顏色顯示blue。
?相信你對樣式權(quán)重有了新的認(rèn)知吧霹购，哈哈佑惠，樹立正確的三觀的感覺真好！Ｆ敫怼膜楷！
