Css权重计算方式

权重计算公式

将选择器按：id选择器,类选择器,标签选择器进行个数统计，根据统计结果进行排序

</p>
    <title></title>
<style type="text/css">
        /* 1，0，1 */
        #box1 p {
            color: red;
        }
        /* 0，3，2 */
        .div1 div.div2 .div3 p {
            color: blue;
        }
        /* 1, 1, 2 */
        div.div1 #box2 p {
            color: green;
        }
        /* 0, 2, 1 */
        .div1 .div2 p {
            color: pink;
        }
    </style>
<div id="box1" class="div1">
        <div id="box2" class="div2">
            <div id="box3" class="div3">
                <p>这么多css属性，我到底该听谁的？会是什么颜色呢？</p>
            </div>
        </div>
    </div>

由统计的结果可知，1,1,2的权重最大，因此p标签的颜色应为green

image

高维打低维

看过《三体》的同学都知道，高维空间对于低维空间可以随便打，在四维空间，可以轻易地摧毁在三维空间无坚不摧的水滴。类似的，在css中，再多的标签选择器，也敌不过一个类选择器

image

继承而来的权重为0

继承父辈的财产，如果不好好利用，而是坐吃山空，那远不如自力更生者。css继承的样式，权重是0。即：随便一个标签选择器就能覆盖继承的样式

image

权重相同怎么办

如果选择器的权重相同，以style中后出现的选择器为准

image

    <title></title>
<style type="text/css">
        /* 1,1,1 */
        #box1 .div2 p{
            color:red;
        }
        /* 1,1,1 */
        .div1 #box3 p{
            color:blue;
        }
    </style>
<div id="box1" class="div1">
        <div id="box2" class="div2">
            <div id="box3" class="div3">
                <p>权重相同的情况下，以style中后出现的选择器为准</p>
            </div>
        </div>
    </div>

image

超出五行外的!important

有时候，我们需要给某个css样式赋予特殊的权重，尤其是接手一个css写得乱七八糟的项目，又没充足的时间去梳理样式代码，此时就可以在分号前加上!important，此关键字将超越所有权重，但不能滥用。

注意事项：

• !important不影响继承性，该是0还是0。一个标签是通过继承性影响的，权重是0，加上!important也是0，也不能与已经选中了的选择器抗衡

• !important不影响就近原则，远的那个，写上!important也没用，还是以近的那个为准