从零开始剖析 CSS 选择器的权重和优先级

在浩瀚的 CSS 世界中，选择器和权重扮演着至关重要的角色，它们决定了哪种样式规则优先应用于 HTML 元素。掌握选择器的权重规则，对于编写高效、易于维护的 CSS 代码至关重要。

选择器权重

选择器权重是一个用于确定 CSS 规则优先级的数字值。权重值越高，该规则的优先级就越高，也就更可能被浏览器应用于元素。选择器权重由以下部分组成：

• 基本权重： 由选择器类型决定。
• ID 选择器： 100
• 类、伪类和属性选择器： 10
• 元素选择器： 1
• 权重乘数： 特殊选择器（如 :not()）会增加权重乘数，如 1 或 2。

选择器权重计算

选择器权重的计算遵循以下规则：

• ID 选择器： 100 倍选择器数量。
• 类、伪类和属性选择器： 10 倍选择器数量。
• 元素选择器： 选择器数量。
• 权重乘数： 将结果乘以权重乘数。

选择器优先级

当多个选择器适用于同一元素时，浏览器将根据优先级来确定应用哪个规则。优先级由以下因素决定：

• 权重： 具有最高权重的选择器优先级最高。
• 特异性： 具有更高特异性的选择器优先级更高。特异性由选择器中 ID、类和属性选择器的数量来衡量。
• 顺序： 如果权重和特异性相等，则后声明的规则具有更高的优先级。

权重示例

让我们通过一些示例来理解选择器的权重和优先级：

• 示例 1：

  • p { color: red; }
  • p.error { color: blue; }
  • p#my-error { color: yellow; }

  在这个示例中，#my-error 具有最高的权重（100），其次是 .error（10），最后是 p（1）。因此，#my-error 优先级最高，其样式规则将被应用于元素。

• 示例 2：

  • div p { color: black; }
  • p.error { color: blue; }
  • p#my-error { color: yellow; }

  在这个示例中，#my-error 仍然具有最高的权重，但 div p 和 .error 具有相同的权重（10）。但是，div p 的特异性更高（2），因此优先级更高。这意味着 div p 的样式规则将被应用于具有类 error 的 div 中的段落。

最佳实践

在使用选择器时，遵循以下最佳实践可以提升 CSS 代码的质量：

• 避免使用不必要的内联样式。
• 优先使用 ID 选择器来确保最高优先级。
• 适当地使用类和伪类选择器。
• 保持元素选择器的数量较少。
• 仅在需要时使用权重乘数。

通过理解选择器的权重和优先级，您可以编写更有条理、更有效的 CSS 代码，从而实现精美的页面设计和无缝的用户体验。