关于CSS 中权重的教程

在 CSS（层叠样式表）中，权重是用来确定样式优先级的一个重要概念。它决定了当多个规则应用于同一个元素时，哪些规则将被优先应用。理解 CSS 权重是编写有效样式、避免样式冲突的关键。本文将介绍 CSS 中权重的计算规则，以帮助您更好地掌握这一概念。

1. 选择器类型和权重

首先，让我们了解不同类型选择器的权重值。CSS 中的选择器类型从具体到抽象可以分为以下几种：

• 行内样式（inline styles）: 权重值为 1000
• ID 选择器：权重值为 100
• 类选择器、伪类选择器、属性选择器：权重值为 10
• 元素选择器、伪元素选择器：权重值为 1
• 通用选择器、子选择器、相邻兄弟选择器、后代选择器：权重值为 0

2. 权重计算规则

当多个规则应用于同一个元素时，CSS 根据这些规则的权重来确定最终生效的样式。通常，权重值越高的规则将覆盖权重值较低的规则。下面是 CSS 权重计算的规则：

1. 行内样式的权重值最高，优先级最大。
2. 如果有样式声明相互冲突，那么 ID 选择器的权重值最高。
3. 如果 ID 选择器权重相同，类选择器、属性选择器、伪类选择器的权重值次之。
4. 如果类选择器、属性选择器、伪类选择器权重相同，元素选择器、伪元素选择器的权重值较低。
5. 如果以上所有权重值相同，CSS 将按照样式定义的先后顺序来确定优先级。

3. 示例说明

让我们通过一个示例来演示 CSS 权重的计算过程：