CSS优先级计算方法（推荐）

1. 了解优先级

在计算CSS优先级之前，首先需要了解优先级的概念。优先级是用来确定当多个CSS规则应用到同一个元素时，哪个规则具有更高的优先级，从而决定最终的样式表现。

CSS优先级是由选择器的特殊性以及重要性来决定的。特殊性通过选择器的特征来衡量，越具体的选择器特征优先级越高；重要性是通过!important声明来设定，拥有!important声明的规则具有最高的优先级。

2. 计算优先级

计算CSS优先级需要考虑以下三个方面：

2.1 行内样式（特殊性为1000）

行内样式通过在HTML标签的style属性中指定CSS规则来实现，具有最高的优先级。特殊性被设置为1000，无论其他选择器的特殊性如何，行内样式的优先级始终最高。

示例：

<p style="color: red;">这是一个示例行内样式</p>

2.2 ID选择器（特殊性为100）

ID选择器通过在CSS选择器中使用#来定义，特殊性为100。在同一个页面中，同一个ID选择器只能被使用一次。

示例：

<p id="my-paragraph">这是一个示例ID选择器</p>

#my-paragraph {
  color: blue;
}

2.3 类选择器、属性选择器和伪类选择器（特殊性为10）

类选择器通过在CSS选择器中使用.来定义，属性选择器通过在CSS选择器中使用[]及属性名来定义，伪类选择器通过在CSS选择器中使用:来定义，它们的特殊性都为10。

示例：

<p class="my-class">这是一个示例类选择器</p>

.my-class {
  color: green;
}

<a href="https://example.com" target="_blank">这是一个示例属性选择器</a>

a[target="_blank"] {
  color: orange;
}

<a href="https://example.com">这是一个示例伪类选择器</a>

a:hover {
  color: purple;
}

2.4 元素选择器和伪元素选择器（特殊性为1）

元素选择器通过直接使用标签名来定义，伪元素选择器通过在CSS选择器中使用::来定义，它们的特殊性都为1。

示例：

<p>这是一个示例元素选择器</p>

p {
  color: gray;
}

<p>这是一个示例伪元素选择器</p>

p::first-letter {
  font-size: 2em;
}

3. 计算示例

首先，假设有以下CSS规则：

p {
  color: black;
}

#my-paragraph {
  color: blue;
}

.my-class {
  color: green;
}

a[target="_blank"] {
  color: orange;
}

a:hover {
  color: purple;
}

接下来，假设我们有以下HTML标记：

<p id="my-paragraph" class="my-class">这是一个示例文本</p>

根据计算规则，优先级如下：

• 行内样式特殊性为1000，重要性为1。
• ID选择器特殊性为100，重要性为0。
• 类选择器、属性选择器和伪类选择器特殊性为10，重要性为0。
• 元素选择器和伪元素选择器特殊性为1，重要性为0。

因此，最终计算结果是：

• 行内样式优先级为1011，规则为color: blue;。
• ID选择器优先级为100，规则为color: blue;。
• 类选择器优先级为10，规则为color: green;。
• 元素选择器优先级为1，规则为color: black;。

所以，最终显示的颜色将是蓝色。

4. 总结

使用CSS优先级计算方法可以帮助我们理解和控制CSS样式的应用顺序。通过合理设置选择器的特殊性和重要性，我们可以轻松地管理和调整元素的样式。