您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站也有正规军!我们做的模板网站有永易搜CMS终身使用授权,正版系统、无惧侵权!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

建站咨询电话
0371-56789-390

快速建站:CSS样式的优先级知识总结
发表:紫石头原创模板堂    发表时间:2019-07-09 10:52:17    阅读:134
    有时候我们在项目中明明写好了css样式,结果却没有显示自己想要的效果。如果代码没有错误,这种情况很有可能是css的优先级影响导致的。一起随紫石头快速建站小编了解下这方面的知识吧!
    一般情况下,使用!important可以改变优先级别为最高,其次是style对象,然后是id > class >tag ,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。
    !important > style > [ id > class > tag ]
    原则一:代码从上到下,后出现的样式优先于先出现的同一样式。例:
    <style type=”text/css”>
    .def1{background:black;}
    .def2{background:yellow; }
    </style>
    <div class=” def2 def1″>测试1</div>
    结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。
    原则二:标签声明(类似div开头) < class声明(以 .开头) < id声明(以#开头)
    以上这三种声明处于不同的量级份量上,div开头相当于1克重,以点开头的相当于1公斤 重,而以#号开头相当于1吨重。例:
    <style type=”text/css”>
    #bb{background:pink}
    .def{background:black;}
    div{background:yellow; }
    </style>
    <div id=”bb” class=”def”>测试2</div>
    结果:所有浏览器均pink色,注意:虽然按优先原则一,后出现的权重高,但那只是在同样重量级下的比较,优先原则二各重量级别就不同了。
    原则三:数量取胜。
    如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成,则权重按出现符号的量级增加。比如:
    #bb #tt #dd {background:red} 则重量等于3吨
    #bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克,这么精确的重量,就不需要举例了吧。
    再次说明:优先原则一只适用两个样式声明同样重的情况。
    原则四:!important
    相当于无限重量,在之前已经有说明,需要注意:ie下,在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。
    <style type=”text/css”>
    .def1{background:yellow !important;background:red;}
    .def2{background:green;}
    </style>
    <div class=”def1 def2 “>dd</div>
    结果:ie下,green色,background:yellow !important被后面的background:red冲洗了,而background:red与background:green的较量中,前者败在优先原则一之下。
    原则五:近水楼台。
    <div style=”background:black”></div>直接写在元素体内的style优先级别最高!(仅次于!important)用重量来形容,可以定为百万吨量级。
    <style type=”text/css”>
    .def1{ background:red;}
    </style>
    <div class=”def1 ” style=”background:black”>dd</div>
    结果:black色。
    <style type=”text/css”>
    .def1{ background:red !important;}
    </style>
    <div class=”def1 ” style=”background:black”>dd</div>
    结果:red色。
    <style type=”text/css”>
    .def1{ background:red !important;}
    </style>
    <div class=”def1 ” style=”background:black !important”>dd</div>
    结果:black色。
模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2022 zishitou.com All Rights Reserved 永易搜旗下紫石头原创模板堂 版权所有 豫ICP备14011598号-7 营业执照