前些天榛了，我朋友發(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è)頁面仔我表示曙强。。途茫。
經(jīng)過修行碟嘴，我弄得了它們的規(guī)矩。
在一大堆css規(guī)則中慈省，到底哪個(gè)有效臀防。這其實(shí)由這3個(gè)說的算---特殊性（權(quán)重）、重要性边败、繼承。
特殊性
簡(jiǎn)單的說就是瀏覽器給每條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è)類選擇器、屬性選擇器或偽類掰担，加 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í)就是有沒有！important.有矾克！important比沒有的高級(jí)页慷。
div{
color:#333 !important;
}
#ahole{
color:#444;
}
<div id="ahole">I am ahole</div>
- 結(jié)果出來了，div勝出
- ahole：為啥胁附，我的特殊性比較高.
- div : 嘻嘻酒繁，我爸爸是！important汉嗽。
- ahole: ....
這個(gè)故事告訴我們欲逃，有！improtant的就是疟睿× 稳析。
繼承
樣式的繼承我想大家都懂就啰嗦了洗做。
但是有一點(diǎn)需要注意，我們來看一下彰居，最開始的demo诚纸。
為什么都陈惰！important了都沒有勝出呢畦徘。
原因是：繼承沒有特殊性井辆。也就是比0,0,0,0 還要低級(jí)溶握。
最開始的demo中，span有兩個(gè)規(guī)則可以選擇睡榆，一個(gè)是特殊性極底的*通配符，另一個(gè)是特殊性較高胀屿，而且
有！improtant的亲铡。講道理的話應(yīng)該是后面的勝出，但是不要忘了后面這個(gè)規(guī)則是繼承來的奴愉。這是因?yàn)樗?/p>
繼承的所以還是敗給了*通配符铁孵。（繼承來的連給人家比的資格都沒有锭硼。2333）蜕劝。
層疊
層疊：就是根據(jù)上面3個(gè)規(guī)則疊加起來最后得出結(jié)果的過程。
這個(gè)過程大概是這樣的：
1.先把css規(guī)則能用上的選出來岖沛。
2.判斷選出來的規(guī)則是不是繼承來的。是廊镜？淘汰
3.看看是否有！improtant嗤朴。沒有？跳過雹姊。有？VIP啊吱雏，留下留下，其他的淘汰歧杏。
4.比較特殊性。特殊性高的留下陨献。
5.后面出現(xiàn)的勝出。（都很優(yōu)秀？當(dāng)然選小鮮肉啦急膀。）
注:以上每一步只要剩下一個(gè)規(guī)則就結(jié)束篩選！
結(jié)束語
一個(gè)迷途的大三生卓嫂，很普通，但也沒什么大不了行瑞，努力做自己想做的那種人也就是了。人生苦短何妨一試呢血久。
