本文首发于2019年7月19日。
CSS的样式是有优先级的,浏览器在遇到相同的样式声明时,会按优先级的顺序覆盖:优先级高的会覆盖优先级低的。例如行内样式优先级高更,会覆盖外部CSS文件里面的声明。

实际上,CSS选择器也是有优先级的。同样是选择一个元素,如果两个选择器中设置了相同的样式,那么浏览器会使用优先级更高的选择器。
这里的优先级便被称为CSS特指度

什么是特指度

特指度表示一个CSS选择器的重要程度:通过公式计算出来一个值,值越大便越重要,优先级越高;
这个计算方式被称为I-C-E计算公式
其中:

  • I代表ID,也就是ID选择器,分值100
  • C代表Class,也就是类选择器,分值10
  • E代表Element,也就是标签选择器,分值1

计算选择器的特指度,只需要把选择器中的这三类总分值加算即可;
例如:
p的特指度是1,因为只有1个标签选择器;
p.large的特指度是11,因为是标签选择器+类选择器;
#content的特指度是100,只有一个ID选择器;
div p#large ul.list li的特指度是114,因为有1个ID、1个类、4个元素选择器;

也可以简记为:ID > class > 标签 > 其它。
另外需要注意的是,*选择器通配符的优先级最低,特指度是0。

CSS选择器样式覆盖

CSS选择器的特指度更高,优先级更高,这个选择器设置的样式会覆盖特指度低的选择器的样式;
例如:

1
2
3
4
5
6
7
8
9
10
11
<div class="main" id="main"></div>
<style>
#main {
background-color: blue;
height: 100px;
}
.main {
background-color: red;
width: 200px;
}
</style>

上面的div标签的背景色最终是蓝色,因为ID选择器特指度更高,浏览器遇到相同的background-color样式属性时,特指度更高的ID选择器覆盖类选择器的值。

另外,这个div元素的高度为100px,宽度为200px,因为heightwidth并不是同一属性,因此他们共同生效,都会作用于这个元素上。

CSS样式覆盖

对于同一个元素上的样式,浏览器遵循这种样式优先级覆盖:
!important > 内联 > ID > class > 标签/伪类/属性选择 > 伪对象 > 继承 > 通配符。

同种类的样式,优先级高的覆盖优先级低的
例如内联样式设置了height:100px,而外部CSS文件定义的是height:500px,这时内联样式优先级高,元素的实际高度是100px。

不同种类的样式,是会共同生效的
例如内联样式设置了margin-top:100px,而外部样式设置了margin-bottom:100px,那么这个元素的上下外边距均是100px,这两条样式都是生效的。

在同一个地方多次声明某个样式,后声明的会覆盖先声明的
例如一个元素内联样式是height:10px;height:50px;,那么它的高度就是50px,后声明的会覆盖之前的。