前些天，我朋友發(fā)了這個(gè)段CSS我。
* {
color:#fff ;
}
div {
color:#000 !important;
}
<div><span>I am ahole</span></div>
Q：color是哪個(gè)？
A：#000 不是么？
what the fuck ！！ 結(jié)果是#fff。作為一個(gè)頁(yè)面仔我表示。。。
經(jīng)過(guò)修行，我弄得了它們的規(guī)矩。
在一大堆css規(guī)則中，到底哪個(gè)有效。這其實(shí)由這3個(gè)說(shuō)的算---特殊性（權(quán)重）、重要性、繼承。
特殊性
簡(jiǎn)單的說(shuō)就是瀏覽器給每條CSS規(guī)則前面的選擇器的分?jǐn)?shù)，這個(gè)分?jǐn)?shù)越高就越有可能被應(yīng)用。
舉個(gè)栗子：
div{....} vs #name{}
這里#name的特殊性就比div高。
如何比較呢？
特殊性分4個(gè)部分，如：0,0,0,0。
- 一個(gè)內(nèi)嵌在html中的屬性，加1,0,0,0；eg：<div style="color:#000"></div>
- 一個(gè)ID選擇器，加 0,1,0,0；eg:#id{}
- 一個(gè)類(lèi)選擇器、屬性選擇器或偽類(lèi)，加 0,0,1,0；eg:[href]{} 或 ：hover{}
- 一個(gè)元素或偽選擇器，加 0,0,0,1;eg:div{} 或者 :after{}
- 結(jié)合符和* 不加；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 的特殊性。
重要性
重要性其實(shí)就是有沒(méi)有！important.有！important比沒(méi)有的高級(jí)。
div{
color:#333 !important;
}
#ahole{
color:#444;
}
<div id="ahole">I am ahole</div>
- 結(jié)果出來(lái)了，div勝出
- ahole：為啥，我的特殊性比較高.
- div : 嘻嘻，我爸爸是！important。
- ahole: ....
這個(gè)故事告訴我們，有！improtant的就是?！?。
繼承
樣式的繼承我想大家都懂就啰嗦了。
但是有一點(diǎn)需要注意，我們來(lái)看一下，最開(kāi)始的demo。
為什么都！important了都沒(méi)有勝出呢。
原因是：繼承沒(méi)有特殊性。也就是比0,0,0,0 還要低級(jí)。
最開(kāi)始的demo中，span有兩個(gè)規(guī)則可以選擇，一個(gè)是特殊性極底的*通配符，另一個(gè)是特殊性較高，而且
有！improtant的。講道理的話(huà)應(yīng)該是后面的勝出，但是不要忘了后面這個(gè)規(guī)則是繼承來(lái)的。這是因?yàn)樗?/p>
繼承的所以還是敗給了*通配符。（繼承來(lái)的連給人家比的資格都沒(méi)有。2333）。
層疊
層疊：就是根據(jù)上面3個(gè)規(guī)則疊加起來(lái)最后得出結(jié)果的過(guò)程。
這個(gè)過(guò)程大概是這樣的：
1.先把css規(guī)則能用上的選出來(lái)。
2.判斷選出來(lái)的規(guī)則是不是繼承來(lái)的。是？淘汰
3.看看是否有！improtant。沒(méi)有？跳過(guò)。有？VIP啊，留下留下，其他的淘汰。
4.比較特殊性。特殊性高的留下。
5.后面出現(xiàn)的勝出。（都很優(yōu)秀？當(dāng)然選小鮮肉啦。）
注:以上每一步只要剩下一個(gè)規(guī)則就結(jié)束篩選！
結(jié)束語(yǔ)
一個(gè)迷途的大三生，很普通，但也沒(méi)什么大不了，努力做自己想做的那種人也就是了。人生苦短何妨一試呢。
