尖沙咀到底谁说的算？！--- CSS层叠

前些天，我朋友发了这个段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.后面出现的胜出。（都很优秀？当然选小鲜肉啦。）

注:以上每一步只要剩下一个规则就结束筛选！

结束语

一个迷途的大三生，很普通，但也没什么大不了，努力做自己想做的那种人也就是了。人生苦短何妨一试呢。