当前位置:Gxlcms > html代码 > 尖沙咀到底谁说的算?!-CSS层叠_html/css_WEB-ITnose

尖沙咀到底谁说的算?!-CSS层叠_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:23人阅读

前些天,我朋友发了这个段CSS我。

//css   *{        color:#fff ;    }        div{        color:#000 !important;    }//html        
I am ahole

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比没有的高级。

    //cssdiv{    color:#333 !important;}#ahole{    color:#444;}//html
    I am ahole
  • 结果出来了,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.后面出现的胜出。(都很优秀?当然选小鲜肉啦。)
    注:以上每一步只要剩下一个规则就结束筛选!

    感谢花时间看完,如有纰漏麻烦给我留言。海涵!

    人气教程排行