CSS选择器的权重（specificity）

CSS 选择器的权重（specificity）用于决定当多个样式被应用于同一个 HTML 元素时，哪一个样式将最终生效。权重的计算基于选择器的组成成分，不同的选择器有不同的权重值。以下是 CSS 选择器权重的基本概念和计算方法：

权重等级

CSS 选择器权重通常分为以下几个等级：

1. 内联样式（Inline style） ：

   • 权重值：1000
   • 例如：<p style="color: red;">，这种直接在元素上添加样式的写法拥有最高的权重。

2. ID 选择器：

   • 权重值：100
   • 例如：#uniqueId，每个 ID 应该在一个文档中唯一。

3. 类选择器（Class）、属性选择器（Attribute）、伪类（Pseudo-class） ：

   • 权重值：10
   • 例如：.className, [attribute=value], :hover。

4. 标签选择器（Type selector）、伪元素（Pseudo-element） ：

   • 权重值：1
   • 例如：p, ::before。

5. 通用选择器（Universal selector）、子选择器（Child combinator）、相邻同胞选择器（Adjacent sibling combinator） ：

   • 权重值：0
   • 例如：*, >, +。

权重计算

对于一个复杂的选择器，其权重是基于选择器中各部分的权重之和来计算的。权重计算遵循以下规则：

• 权重值是一个四元组 (a, b, c, d)，其中 a 表示 ID 选择器的数量，b 表示类选择器、属性选择器和伪类的数量，c 表示类型选择器的数量，d 则通常为 0，用于未来扩展。
• 如果两个或多个选择器具有相同的权重，那么最后定义的样式将生效（CSS 的层叠规则）。

示例

考虑以下 CSS 选择器及其权重：

• #myId 的权重为 100。
• .myClass 的权重为 10。
• p 的权重为 1。
• div p 的权重为 1（两个类型选择器，权重相加）。
• .myClass#myId 的权重为 110（一个类选择器加上一个 ID 选择器）。

如果一个元素同时被多个选择器选中，那么具有最高权重的选择器将生效。如果权重相同，则按照 CSS 文件中定义的顺序，后来定义的选择器覆盖先前定义的选择器。

特殊情况：!important

!important 是一个特殊的声明，可以用来强制某个特定的样式规则覆盖其他规则。它拥有最高的优先级，可以覆盖任何其他权重（除了另一个带有 !important 的规则）。使用 !important 应该谨慎，因为它破坏了 CSS 的层叠特性，使得调试更加困难。

总结

理解 CSS 选择器的权重对于编写有效且易于维护的样式表至关重要。通过合理地使用不同类型的 CSS 选择器，可以确保样式按预期的方式应用到页面元素上。在实际开发过程中，应该尽量避免过于复杂的选择器和滥用 !important，以保持代码的简洁性和可维护性。