CSS权重计算

发布时间:2019-02-22 作者:一点通


CSS的选择器有很多种,而最终某个样式的值只能取其中一个,所以必然存在优先级和覆盖。了解各个选择器的优先级能够让我们的CSS更加准确和清晰。

这里有一个很重要的概念:权重(用0,0,0,04个部分表示)。简单说就是为了便于我们计算最终的优先级,给每种选择器都赋予了一个能力值,值越大的胜出。比如ID选择器的权重值为0,1,0,0,这里我们为了方便计算,就用整数100来替代。

下面是所有选择器的优先级和对应的权重值:

1、元素选择器和伪元素

权重值+1

div{

}
div::before{

}

2、类选择器和属性选择器和伪类

权重值+10

.box{

}

属性选择器

[type="radio"]{

}

伪类

.box:hover{

}

3、ID选择器

权重值+100

#box{

}

4内联样式

权重值+1000

<div style="width: 100px"></div>

5!important

!important的权重是最高的,可谓是超出三界之外,不在五行之中。在它面前什么规则都没用了。

由于important会破坏样式表中的级联规则,增加调试的难度,所以在平时开发中应该尽量避免使用。

当带有!important的规则相冲突时,仍然会按照上面的优先级裁定。

实际的CSS代码是具有层级结构的,那么究竟如何确定优先级呢?我们可以将上面提到的权重值进行累加计算,最终结果谁大就用谁的。举几个简单的例子

ul li {

}

元素选择器(+1) + 元素选择器(+1) = 2

ul li.red{

}

元素选择器(+1) + 元素选择器(+1) + 类选择器(+10) = 12

ul.bule li.red{

}

元素选择器(+1 * 2) + 类选择器(+10 * 2)= 22

ul.blue[name=tom]{

}

元素选择器(+1) + 类选择器(+10) + 属性选择器(+10) = 21

两组相同权重的规则,后面的会覆盖前面的

我们可以发现,不同选择器的权重值差距基本上都是断层的,比如类选择器和ID选择器相差90。也就是说,在正常情况下,无论多少个类选择器组合起来永远也不可能超过一个ID选择器。

有意思的<a>标签

我想让鼠标移到A标签上面的时候文字变成蓝色,于是我这样写CSS

a:hover{
    color:blue
}
a:link{
    color:red
}

那么结果是什么呢?鼠标移到上面时文字并没有变成蓝色,仍然是红色。相信很多初学者都遇到过这样的问题,但也没有深究其中的原理。

事实上根据我们上面降到的优先级来理解,道理就很简单了。首先,A标签的四个伪类(:link:hover:activevisited)的优先级是一样的,所以写到后面的会覆盖前面的值。

而在鼠标移到A标签上时,实际上不止应用了:hover这个选择器,还应用了:link(未访问链接)。所以后面的a:link{}覆盖了a:hover{}也就不难理解了。

为了避免出现类似的情况,我们在写A标签的伪类样式时,需要遵循这样一个顺序::linkvisited:hover:active。为了方便记忆,可以简写成LVHA