前些天，我朋友發了這個段CSS我。 Q：color是哪個？ A： 000 不是麽？ what the fuck ！！ 結果是 fff。作為一個頁面仔我表示。。。 經過修行，我弄得了它們的規矩。 在一大堆css規則中，到底哪個有效。這其實由這3個說的算 特殊性（權重）、重要性、繼承。 特殊性 簡單的說
前些天，我朋友發了這個段CSS我。
//css
*{
color:#fff ;
}
div{
color:#000 !important;
}
//html
<div><span>I am ahole</span></div>
Q：color是哪個？
A：#000 不是麽？
what the fuck ！！ 結果是#fff。作為一個頁面仔我表示。。。
經過修行，我弄得了它們的規矩。
在一大堆css規則中，到底哪個有效。這其實由這3個說的算---特殊性（權重）、重要性、繼承。
特殊性
簡單的說就是瀏覽器給每條CSS規則前面的選擇器的分數，這個分數越高就越有可能被應用。
舉個慄子：
div{....} vs #name{}
這裡#name的特殊性就比div高。
如何比較呢？
特殊性分4個部分，如：0,0,0,0。
- 一個內嵌在html中的屬性，加1,0,0,0；eg：
- 一個ID選擇器，加 0,1,0,0；eg:#id{}
- 一個類選擇器、屬性選擇器或偽類，加 0,0,1,0；eg:[href]{} 或 ：hover{}
- 一個元素或偽選擇器，加 0,0,0,1;eg:div{} 或者 :after{}
- 結合符和* 不加；eg: * > * {}
慄子二
- h1 {} /* 0,0,0,1 */
- p em {} /* 0,0,0,2 */
- p.ahole {} /* 0,0,1,1 */
- p.ahole em.chan {} /* 0,0,2,2 */
- #ahole div{} /* 0,1,0,1 */
- p * [href] {} /* 0,0,1,1 */
先比較高位再比較地位，所以h1 的特殊性小雨 p em 的特殊性。
重要性
重要性其實就是有沒有！important.有！important比沒有的高級。
//css
div{
color:#333 !important;
}
#ahole{
color:#444;
}
//html
<div id="ahole">I am ahole</div>- 結果出來了，div勝出
- ahole：為啥，我的特殊性比較高.
- div : 嘻嘻，我爸爸是！important。
- ahole: ....
這個故事告訴我們，有！improtant的就是牛× 。
繼承
樣式的繼承我想大家都懂就啰嗦了。
但是有一點需要註意，我們來看一下，最開始的demo。
為什麼都！important了都沒有勝出呢。
原因是：繼承沒有特殊性。也就是比0,0,0,0 還要低級。
最開始的demo中，span有兩個規則可以選擇，一個是特殊性極底的*通配符，另一個是特殊性較高，而且有！improtant的。講道理的話應該是後面的勝出，但是不要忘了後面這個規則是繼承來的。這是因為他是繼承的所以還是敗給了*通配符。（繼承來的連給人家比的資格都沒有。2333）。
層疊
層疊：就是根據上面3個規則疊加起來最後得出結果的過程。
這個過程大概是這樣的：
1.先把css規則能用上的選出來。
2.判斷選出來的規則是不是繼承來的。是？淘汰
3.看看是否有！improtant。沒有？跳過。有？VIP啊，留下留下，其他的淘汰。
4.比較特殊性。特殊性高的留下。
5.後面出現的勝出。（都很優秀？當然選小鮮肉啦。）
註:以上每一步只要剩下一個規則就結束篩選！
