zoukankan      html  css  js  c++  java
  • 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同一规则,依照从上到下的顺序就近渲染。

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

  • 相关阅读:
    zookeeper的ACL权限控制
    Zookeeper客户端Curator基本API
    get和post的区别
    Html基本操作实例代码
    poj3322 Bloxorz I
    Delphi 调用SQL Server 2008存储过程
    架构设计师—你在哪层楼?
    LINUX常用命令
    分层自动化测试与传统自动化测试的差别
    商业智能漫谈
  • 原文地址:https://www.cnblogs.com/my_front_research/p/2849874.html
Copyright © 2011-2022 走看看