CSS 选择器的优先级：从样式权重到 !important

了解 CSS 选择器

在 CSS 中，选择器用于指定要应用样式的 HTML 元素。选择器可以分为多种类型，包括：

• 行内样式：使用 style 属性直接将样式应用于元素。
• id 选择器：使用 id 属性来选择元素。
• class 选择器：使用 class 属性来选择元素。
• 标签选择器：使用 HTML 标签名称来选择元素。

CSS 选择器的优先级

当多个选择器同时应用于一个元素时，优先级较高的选择器将被应用，而优先级较低的选择器将被忽略。CSS 选择器的优先级由以下因素决定：

• 特殊性：特殊性是指选择器匹配元素的程度。特殊性越高，优先级越高。特殊性由以下因素决定：
  • 行内样式的特殊性最高。
  • id 选择器的特殊性为 100。
  • class 选择器的特殊性为 10。
  • 标签选择器的特殊性为 1。
• 位置：位置是指选择器在 CSS 代码中的位置。位置越靠近元素，优先级越高。
• !important 声明：!important 声明可以提高选择器的优先级。!important 声明的优先级为正无穷。

权重的计算

CSS 选择器的权重由以下公式计算得出：

权重 = (行内样式的特殊性 * 1000) + (id 选择器的特殊性 * 100) + (class 选择器的特殊性 * 10) + (标签选择器的特殊性 * 1)

例如，一个具有 id 属性的元素的权重为：

权重 = (0 * 1000) + (1 * 100) + (0 * 10) + (0 * 1) = 100

而一个具有 class 属性的元素的权重为：

权重 = (0 * 1000) + (0 * 100) + (1 * 10) + (0 * 1) = 10

因此，具有 id 属性的元素的优先级高于具有 class 属性的元素。

!important 声明

!important 声明可以提高选择器的优先级。!important 声明的优先级为正无穷。这意味着，任何具有 !important 声明的选择器都将被应用，而忽略其他选择器的优先级。

例如，以下代码将使具有 id 属性的元素的背景颜色为红色，即使具有 class 属性的元素也具有背景颜色为蓝色的样式：

#element {
  background-color: red !important;
}

.class {
  background-color: blue;
}

结论

CSS 选择器的优先级是一个复杂的概念，但掌握优先级规则对于编写有效的 CSS 代码非常重要。通过理解选择器的特殊性、位置和 !important 声明，您可以控制样式的应用方式并创建更美观、更一致的网页。