权重计算公式
将选择器按: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也没用,还是以近的那个为准