看透 CSS 生效规则，做前端技术的明白人

CSS 生效规则揭秘

在前端开发中，CSS 样式表是至关重要的，它决定了网页元素的视觉表现。然而，当多个 CSS 规则同时作用于一个元素时，浏览器会根据一定的规则来决定最终生效的样式。这些规则统称为 CSS 生效规则。

CSS 优先级

CSS 优先级是一个由四个值组成的元组：

• 特异性
• 来源
• 导入顺序
• 声明顺序

当多个 CSS 规则作用于同一个元素时，浏览器会根据优先级从高到低依次比较。优先级高的规则会覆盖优先级低的规则。

特异性

特异性是 CSS 优先级中最重要的因素。它根据选择器的类型和数量来计算。选择器的类型包括：

• 内联样式（权重最高）
• ID 选择器
• 类、伪类和属性选择器
• 元素选择器
• 通配符选择器（权重最低）

选择器的数量越多，特异性就越高。例如，一个带有 ID 选择器的规则比一个带有类选择器的规则具有更高的特异性。

来源

来源指的是 CSS 规则的出处。一般来说，用户样式表（<style> 标签）的优先级高于浏览器默认样式表。

导入顺序

如果两个规则具有相同的特异性，则导入顺序较后的规则具有更高的优先级。

声明顺序

如果两个规则具有相同的特异性和来源，则声明顺序较后的规则具有更高的优先级。

CSS 权重

CSS 权重是一种简化后的优先级表示方法。它将特异性、来源和导入顺序合并为一个单一的数字。权重越大，优先级越高。

权重的计算公式为：

权重 = (1000 x 特异性) + (100 x 来源) + (10 x 导入顺序)

CSS 继承

CSS 继承是一种元素从其父元素继承样式的机制。当一个元素没有显式设置某个样式时，它会从其父元素继承该样式。

继承规则的优先级低于显式设置的样式。例如，如果一个元素的父元素设置了 color 样式为红色，而该元素没有显式设置 color 样式，则该元素也会显示为红色。

CSS 特异性

CSS 特异性是衡量选择器与元素匹配程度的一种指标。特异性越高，选择器越具体，匹配的元素越少。

特异性的计算规则如下：

• 内联样式：1000
• ID 选择器：100
• 类、伪类和属性选择器：10
• 元素选择器：1
• 通配符选择器：0

!important

!important 是一种强制性声明，它可以覆盖所有其他 CSS 规则。当一个样式声明后面加上 !important 时，它将具有最高的优先级。

!important 应谨慎使用，因为它可能会破坏 CSS 的级联特性，导致难以维护的代码。

总结

CSS 生效规则是一个复杂的体系，但掌握了这些规则，您就可以对 CSS 代码的生效机制有一个清晰的了解。通过合理利用 CSS 优先级、继承、特异性和 !important，您可以编写出更有效、更可维护的 CSS 代码。