前些天，我朋友发了这个段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。
先比较高位再比较地位，所以h1 的特殊性小雨 p em 的特殊性。
重要性其实就是有没有！important.有！important比没有的高级。
//cssdiv{ color:#333 !important;}#ahole{ color:#444;}//html<div id="ahole">I am ahole</div>这个故事告诉我们，有！improtant的就是牛× 。
样式的继承我想大家都懂就啰嗦了。
但是有一点需要注意，我们来看一下，最开始的demo。
为什么都！important了都没有胜出呢。
原因是：继承没有特殊性。也就是比0,0,0,0 还要低级。
最开始的demo中，span有两个规则可以选择，一个是特殊性极底的通配符，另一个是特殊性较高，而且有！improtant的。讲道理的话应该是后面的胜出，但是不要忘了后面这个规则是继承来的。这是因为他是继承的所以还是败给了通配符。（继承来的连给人家比的资格都没有。2333）。
层叠：就是根据上面3个规则叠加起来最后得出结果的过程。
这个过程大概是这样的：
1.先把css规则能用上的选出来。
2.判断选出来的规则是不是继承来的。是？淘汰
3.看看是否有！improtant。没有？跳过。有？VIP啊，留下留下，其他的淘汰。
4.比较特殊性。特殊性高的留下。
5.后面出现的胜出。（都很优秀？当然选小鲜肉啦。）
注:以上每一步只要剩下一个规则就结束筛选！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
905
收藏
