Skip to main content

级联

有时两个或多个相互冲突的 CSS 规则可能会应用于一个元素。级联是解决多个 CSS 规则应用于一个 HTML 元素所产生冲突的算法。

级联算法分为 4 个不同的阶段

  1. 出现的位置和顺序
  2. 特异性
  3. 来源
  4. 重要性

出现的位置和顺序​

如果两个规则具有相同的特异性和重要性，则后定义的规则将覆盖先定义的规则。

button {
  color: red;
}

button {
  color: blue;
}

特异性​

特异性是用来衡量样式规则优先级的一个指标，特异性数值越高，规则的优先级越高。

  • ID 选择器，特异性100分
  • 类选择器、伪类选择器、属性选择器，特异性10分
  • 标签选择器、伪元素选择器，特异性1分
  • 通用选择器，特异性0分

按优先级排列：ID 选择器 > 属性选择器 > 类选择器 > 标签选择器。

来源​

指的是样式规则来自外部样式表、内部样式表还是内联样式。

  • 内联样式，特异性1000分

按优先级排列：内联样式 > 内部样式表 > 外部样式表。

!important​

使用 !important 标志可以使该规则具有最高的优先级。

  • !important，特异性10000分
.my-class {
  color: red !important;
}