在CSS世界的权力——权重

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

在CSS的世界中也存在着权力即CSS权重

1. 概念

CSS权重指的是样式的优先级有两条或多条样式作用于一个元素权重高的那条样式对元素起作用权重相同的后写的样式会覆盖前面写的样式

2. 以前的BUG

在实际开发中我们常常会遇到样式不生效的问题百思不得其解其实这就是CSS的权重在作祟下面举个栗子

    <style>
        #txt{
            color: black;
        }
        p{
            color: aqua;
        }
    </style>
    <body>
        <p id="txt">CSS的权重问题</p>
    </body>

段落为id选择器所赋的黑色如图

3. 权重计算

大家都了解二进制如何比较大小吧0010>0001 。
其权重计算与其类似。

4.权重的叠加

权重叠加计算的时候就是将叠加的权重都加起来就像二进制加法一样但是要记住权重可以发生叠加但是不能发生进位可以出现 0 0 0 10 但是不能将后面的10进一位

div span {
    /* 0,0,0,2 */
}
p #span_one{
    /* 0,1,0,1 */
}
p{
    /* 0,0,0,1 */
}

浏览器会执行权重最大的样式这就是选择器的权重
每个选择器都有自己的权重组合选择器由相加计算得到
且选择器权重不会满十进一0,1,0,0>0,0,28,0

    <style>
        p {
            color: aqua;
        }
        p #txt{
            color: blue;
        }
        p .txt{
            color: chocolate;
        }
    </style>
    <p id="txt" class="txt">CSS的权重问题</p>
    <p>权重的计算</p>
    <p class="txt">优先渲染权重最大的样式</p>

结果如图