• css样式渲染规则


    css选择符是有权重的。作用于同一标签的样式同一属性,究竟哪个能起到作用,而哪个会被覆盖掉,这就跟css选择符权重有关了。

    在说明权重之前,必须强调一点,那就是css样式规则渲染是先就近渲染,然后才依据选择符权重进行渲染

    看看什么是就近渲染原则

    html:

    <div id="test">
        <p>测试字体颜色</p>
    </div>

    css:

    #test { color:red; }
    p { color:blue; }

    请问,段落p的字体颜色是红色还是蓝色?

    答案是,显示蓝色。

    无论div#test的权重有多大,依据就近原则,p就显示蓝色。

    简单描述什么是css选择符权重渲染规则important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >通配符 > 继承

    然后,有必要警告下,网络传言的权重加法规则是坑爹的。什么id权重是100,class是10,去你大爷的。这里权重不存在加法规则。

    这样认识是正确的:

    0,1,0,0 的优先级比 0,0,1,1的优先级高。

    如果按照加法规则来看,一个id的权重还不及11个class的权重高,这就很坑爹了。

    引用一个恰当的比喻:

    用个比较形象的比喻,选择器的优先级犹如奥运的奖牌榜,id,class,标签,你可以理解为金牌,银牌,铜牌,得了一个金牌,在奖牌榜上的排名永远比你得了多少个银牌来的高。

    具体讨论详见css forest中鬼哥的:重新认识css权重

    小志的CSS selector 认识:关于css selector的优先级

    小李刀刀的:深入解析CSS样式层叠权重值

    补充:渲染规则还包括:

    • style中import的样式规则,和同一规则产生冲突(权重一致),则import的规则无效
    • style,link,import同一规则,依照从上到下的顺序就近渲染。

    此点详见:关于外部样式的权重

  • 相关阅读:
    hdu1874 畅通工程续
    hdu2544 最短路
    hdu1068 Girls and Boys
    hdu1151 Air Raid
    hdu1150 Machine Schedule
    hdu2063 过山车
    Bootstrap 学习笔记12 轮播插件
    Bootstrap 学习笔记11 按钮和折叠插件
    Bootstrap 学习笔记10 弹出框和警告框插件
    Bootstrap 学习笔记9 标签页和工具提示插件
  • 原文地址:https://www.cnblogs.com/my_front_research/p/2849874.html
Copyright © 2020-2023  润新知