深入剖析 CSS 样式权重和优先级，掌控页面元素的显示优先权

2023-12-14 10:12:21

引言

在构建复杂且引人入胜的 web 应用程序时，深入理解 CSS 样式权重的细微差别至关重要。样式权重确定了当多个样式规则应用于相同元素时哪个规则优先级更高。在本文中，我们将深入探讨 CSS 样式权重和优先级，指导您掌控页面元素的显示优先权，从而设计出精美且一致的用户界面。

理解 CSS 优先级

CSS 优先级基于一系列规则，这些规则确定了样式规则在页面上应用的顺序。优先级等级为：

内联样式 ：具有最高优先级，应用于元素的 <style> 属性中。
ID 选择器 ：其次，用于根据其 ID 唯一标识元素。
类选择器、属性选择器 ：优先级稍低，用于匹配具有特定类名或属性的元素。
通用选择器（*） ：最低优先级，匹配页面上的所有元素。

权重计算

每个 CSS 选择器都分配了一个权重，该权重基于其类型。权重值越高，优先级越高。权重由以下公式计算：

A * 1000 + B * 100 + C

其中：

A：内联样式的数量
B：ID 选择器的数量
C：类和属性选择器的数量

选择器特异性

选择器特异性是确定优先级的另一个因素。特异性较高的选择器具有更高的优先级。特异性由以下公式计算：

ID 选择器的数量 + 2 * 类选择器的数量 + 属性选择器的数量

案例演示

为了更好地理解 CSS 优先级，让我们考虑以下示例：

h1 {
  color: red; /* 内联样式，优先级最高 */
}

#heading {
  color: blue; /* ID 选择器，优先级第二 */
}

.important {
  color: green; /* 类选择器，优先级第三 */
}

* {
  color: black; /* 通用选择器，优先级最低 */
}