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

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

  • NO.2

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

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

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

免费咨询热线
0371-56789-390

CSS权重你了解多少?
发表:紫石头原创模板堂    发表时间:2018-09-13 10:26:18    阅读:115
    日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了。希望大家看完本文可以有所收获。
    权重规则总结:
    !important 优先级最高,但也会被权重高的important所覆盖
    行内样式总会覆盖外部样式表的任何样式(除了!important)
    单独使用一个选择器的时候,不能跨等级使css规则生效
    如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
    如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.
    权重相同时,与元素距离近的选择器生效
    css权重优先级用来干嘛?
    在同一个元素使用不同的方式,声明了相同的一条或多条css规则,浏览器会通过权重来判断哪一种方式的声明,与这个元素最为相关,从而在该元素上应用这个声明方式声明的所有css规则。
    权重的五个等级及其权重
    !important;
    行内样式;
    ID选择器, 权重:100;
    class,属性选择器和伪类选择器,权重:10;
    属性选择器指的是:根据元素的属性及属性值来选择元素,比如button的type属性等。
    伪类选择器: :active :focus等选项.
    标签选择器和伪元素选择器,权重:1;
    伪元素选择器: :before :after
    等级关系:
    !important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
    权重规则:
    1.不推荐使用!important
    不推荐使用!important,因为!important根本没有结构与上下文可言,并且很多时候权重的问题,就是因为不知道在哪里定义了一个!important而导致的。
    覆盖important:
    虽然我们应该尽量避免使用!important,但你应该知道如何覆盖important,加点权重就可以实现,codepen的demo
    //!important 优先级最高,但也会被权重高的important所覆盖
    <button id="a" class="a">aaa</button>
    #a{
    background: blue  !important;  /* id的important覆盖class的important*/
    }
    .a{
    background: red  !important;
    }
    2.行内样式总会覆盖外部样式表的任何样式,会被!important覆盖
    3.单独使用一个选择器的时候,不能跨等级使css规则生效
    无论多少个class组成的选择器,都没有一个ID选择器权重高。类似的,无论多少个元素组成的选择器,都没有一个class选择器权重高、无论多少个ID组成的选择器,都没有行内样式权重高。
    codepen的demo;
    在demo中使用了11个class组成一个选择器,最后还是一个ID选择器,设置的样式生效。
    可以想象在玄幻小说的那种等级制度,没有突破那个等级,就没有可比性。
    所以权重是在双方处于同一等级的情况下,才开始对比。
    4.如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效
    选择器可能会包含一个或者多个与权重相关的计算点,若经过权重值计算得到的权重值越大,则认为这个选择器的权重高。举一个简单的栗子:
    .test #test{ } // id 100+class 10=110;
    .test #test span{} // id 100+class 10+span 1=111;
    .test #test .sonClass{} // id 100+class 10+class 10=120; //生效
    5.如果两个相同权重的选择器作用在同一元素上:以后面出现的选择器为最后规则.
    demo
    <div id="app">
    <div class="test" id="test">
    <span >啦啦啦</span>
    </div>
    </div>
    #test span{
    color:blue;
    }
    #app span{ // 生效 因为后面出现
    color: red;
    }
    6.权重相同时,与元素距离近的选择器生效
    比如不同的style表,head头部等,来看下面的栗子:
    #content h1 { // css样式表中
    padding: 5px;
    }
    <style type="text/css">
    #content h1 { // html头部 因为html头部离元素更近一点,所以生效
    padding: 10px;
    }
    </style>
    建议:
    避免使用!important;
    利用id增加选择器权重;
    减少选择器的个数(避免层层嵌套);
模板推荐
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照