在CSS世界的权力—

在CSS世界的权力——权重

news2024/9/21 8:04:29

在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>

结果如图：