CSS权重计算

作者: 多叉树；转载须注明出处

权重计算

CSS 的一个重要特性就是层叠性，即多个css块可以同时作用在一个标签上，效果可以叠加。

如果作用在同一个标签上的css语句块中有相同的语句内容， 那么他们之间谁会生效呢？

因此，必须要有一个机制去从中间协调， 这种机制就是权重计算。

CSS规定几种简单的选择器之间的权重如下

#从中我们不难看出，class选择器作用域越细，权重就越大
行内样式 > id选择器权重 > class选择器权重 > 标签选择器权重

复杂的选择器可以通过ID选择器的个数、class选择器的个数、标签选择器的个数来计算权重。如果得出的分类个数一致，则哪个css写在最后以哪个为准。

提升权重

如果我们需要某个选择器内的某个属性提升权重，则在该属性后面写 !important （有此标记的通常权重无穷大， 优先以此为准）

举例

<style>
        /*权重 (2, 1, 0)*/
        #box1 .box2 #box3 {
            color: greenyellow;
        }

        /*权重 (2, 1, 0)*/
        #box1 #box2 .box3 {
            color: red;
            background-color: antiquewhite;
        }
        /*权重 (1, 2, 0)*/
        #box1 .box2 .box3 {
            color: blueviolet;
            background-color: yellow !important;
        }
</style>

<div id="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>我是段落</p>
        </div>
    </div>
</div>