html的权重计算,Css权重计算方式

权重计算公式

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

/* 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;

}

这么多css属性，我到底该听谁的？会是什么颜色呢？

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

image

高维打低维

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

image

继承而来的权重为0

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

image

权重相同怎么办

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

image

/* 1,1,1 */

#box1 .div2 p{

color:red;

}

/* 1,1,1 */

.div1 #box3 p{

color:blue;

}

权重相同的情况下，以style中后出现的选择器为准

image

超出五行外的!important

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

注意事项：

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

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