尖沙咀到底谁说的算?!- CSS层叠_html/css_WEB-ITnose
//css *{ color:#fff ; } div{ color:#000 !important; }//htmlI am ahole
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;}//htmlI am ahole
这个故事告诉我们,有!improtant的就是牛× 。
继承
样式的继承我想大家都懂就啰嗦了。
但是有一点需要注意,我们来看一下,最开始的demo。
为什么都!important了都没有胜出呢。
原因是:继承没有特殊性。也就是比0,0,0,0 还要低级。
最开始的demo中,span有两个规则可以选择,一个是特殊性极底的通配符,另一个是特殊性较高,而且有!improtant的。讲道理的话应该是后面的胜出,但是不要忘了后面这个规则是继承来的。这是因为他是继承的所以还是败给了通配符。(继承来的连给人家比的资格都没有。2333)。
层叠
层叠:就是根据上面3个规则叠加起来最后得出结果的过程。
这个过程大概是这样的:
1.先把css规则能用上的选出来。
2.判断选出来的规则是不是继承来的。是?淘汰
3.看看是否有!improtant。没有?跳过。有?VIP啊,留下留下,其他的淘汰。
4.比较特殊性。特殊性高的留下。
5.后面出现的胜出。(都很优秀?当然选小鲜肉啦。)
注:以上每一步只要剩下一个规则就结束筛选!
感谢花时间看完,如有纰漏麻烦给我留言。海涵!
上一篇: STM32F1案例 ST7735 TFT液晶显示屏综合库使用
下一篇: 求php正则.该如何解决
推荐阅读
-
这里的大括号怎么看都没发现图片,又没发现文字{},到底怎么弄出来的呢?_html/css_WEB-ITnose
-
尖沙咀到底谁说的算?!- CSS层叠_html/css_WEB-ITnose
-
你对position的了解到底有多少?_html/css_WEB-ITnose
-
CSS中的特殊性、继承、层叠_html/css_WEB-ITnose
-
尖沙咀到底谁说的算?!- CSS层叠_html/css_WEB-ITnose
-
css+div左右布局没效果,右边的被挤到底部_html/css_WEB-ITnose
-
CSS 到底算不算编程语言?--论 CSS 中的逻辑_html/css_WEB-ITnose
-
CSS 到底算不算编程语言?--论 CSS 中的逻辑_html/css_WEB-ITnose
-
CSS > CSS3 中的层叠上下文初探_html/css_WEB-ITnose
-
关于浮动和绝对定位的区别,到底是怎么回事?_html/css_WEB-ITnose