全国服务热线:4008-888-888

技术知识

css 权重值(堆叠性)案例详解

•css中有许多挑选器,那在好几个挑选器都功效于同1个元素的状况下会出現甚么实际效果呢? 编码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf⑻">
    <title></title>
    <style type="text/css">
      p{
        color:red;
        font-size: 10px;
      }
      #wrap{
        color: deeppink;
        font-size: 30px;
      }
      .box{
        color:yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p class='box' id="wrap">
       猜猜我是甚么色调
    </p>
  </body>
</html>

•实行可結果

•小结 : 出現这类实际效果是由于访问器是依据权重值来分辨应用哪样css款式的,权重值高的它的优先选择级会越高,就会展现那种css款式,id挑选器的权重值为100>类挑选器10>标识挑选器1,因此最后結果为id挑选器设定的款式

•示列2 编码

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf⑻">
    <title></title>
    <style type="text/css">
      *{
          color: cyan;
      }
      div {
          color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
        <p class='box' id="wrap">
        猜猜我是甚么色调
        </p>
    </div>
  </body>
</html>

•实行結果

•小结 : 承继元素是沒有权重值的,因此最后結果为通用性挑选器设定的款式

•案例3 编码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf⑻">
    <title></title>
    <style type="text/css">
      p{
          color: yellow;
      }
      *{
          color: cyan;
      }
    </style>
  </head>
  <body>
    <div>
        <p class='box' id="wrap">
        猜猜我是甚么色调
        </p>
    </div>
  </body>
</html>

•实行結果

•小结 : 标识挑选器的权重值是1,可是依然超过通用性挑选器,因此最后結果为标识挑选器设定的款式

•案例4 编码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf⑻">
    <title></title>
    <style type="text/css">
      div p{
          color: yellow;
      }
      div>p{
          color: cyan;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p class='box' id="wrap">
        猜猜我是甚么色调
        </p>
    </div>
  </body>
</html>

•实行結果

•案例5 编码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf⑻">
    <title></title>
    <style type="text/css">
      div>p{
          color: cyan;
      }
      div p{
          color: yellow;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p class='box' id="wrap">
        猜猜我是甚么色调
        </p>
    </div>
  </body>
</html>

•实行結果

权重值的测算

<!--有1个这样的构造:-->
<div class='wrap1' id='box1'>
    <div class="wrap2" id="box2">
        <p class='active'>MJJ</p>
    </div>
</div>

<!--举几个事例看看她们的权重值:-->
p{color:gray;}                          <!--权值为1-->
div div p{color:yellow;}                  <!--权值为1+1+1=3-->
.active{color:red;}                       <!--权值10-->
div .active{color:black;}                <!--权值为11-->
div div .active{color:blue;}             <!--权值为12-->
.wrap #box2 .active{color:purple;}        <!--权值为120-->
#box1 #box2 .active{color:green;}        <!--权值为210-->

<!--由此能够看出,实际上针对权重值的测算来讲,最先它是不进位的,针对应用的挑选器大家不过便是在数数,数挑选器的数量(依照次序来,起先id再是class,再是元素),例如:-->
#box1 .wrap2 div{ color:red; } <!--权值为 1  1  1-->

留意:承继来的特性也是有权重值,但是它的权值十分低,能够了解为承继的权重值最低。

!important 提高权重值案例
<!--大家在做网页页面编码时,一些独特的状况必须为一些款式设定具备最高权重值,如何办?例如大家了解内联款式的权重值是1000,较为大,那末大家可使用!important来处理。-->   
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF⑻">
        <title>!important的应用</title>
        <style type="text/css">
            div{
                color:green !important;
            }
        </style>
    </head>
    <body>
        <div id="box" style="color:red;">
            <span>MJJ</span>
        </div>
    </body>
</html>

•实行結果

•小结: 应用!important是1个坏习惯性,应当尽可能防止,由于这比较严重破坏了款式表格中固有的权重值较为标准,使得在调节bug变得更为艰难。当两条互相矛盾的带有!important标准功效与同1个标识,那末有着最大优先选择级的可能被选用。

甚么状况下可使用!important ?

•第1种

◦你的网站上有1个设计方案了全站款式的css文档
◦另外你或你的小伙子伴写了1些很差的内联款式

•第2种

box p { color: blue; } p.awesome { color: red; }

如何才可以使得文字的色调变成鲜红色?这类状况下,假如不可用!important.第1条标准始终超过第2条的标准。

总结:

总结

以上所述是网编给大伙儿详细介绍的css 权重值(堆叠性)案例详解 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服