## 什么是CSS优先级？
CSS优先级是指在多个CSS规则应用于同一元素时，浏览器根据一定的规则确定哪些规则具有更高的优先级，并应用这些规则。通常，CSS优先级是由选择器的特定性、重要性和来源决定的。
## 如何计算CSS优先级？
以下是计算CSS优先级的规则：
1. 特定性：特定性是指选择器的权重，它由选择器中ID选择器、类选择器和元素选择器的数量决定。ID选择器的特定性最高，为100，类选择器和属性选择器次之，为10，元素选择器的特定性最低，为1。例如：
```css
/* 特定性为0, 0, 1 */
p {
color: red;
}
/* 特定性为0, 1, 0 */
.container p {
color: blue;
}
/* 特定性为0, 1, 1 */
#header .container p {
color: green;
}
```
在上面的例子中，第一个规则的特定性为0, 0, 1，第二个规则的特定性为0, 1, 0，第三个规则的特定性为0, 1, 1。
2. 重要性：可以通过在CSS规则中添加!important来提高其优先级。例如：
```css
p {
color: red !important;
}
```
在上面的例子中，该规则具有最高的优先级，并将覆盖其他具有较低特定性和没有!important声明的规则。
3. 来源：如果两个具有相同特定性和!important声明的规则应用于同一元素，则浏览器将根据它们在样式表中出现的顺序来确定哪个规则具有更高的优先级。后面出现的规则将覆盖先前出现的规则。
## 示例
假设我们有以下HTML代码：
```html
<div class="container">
<p class="text">Hello World!</p>
</div>
```
并且有以下CSS代码：
```css
p {
color: red;
}
.container p {
color: blue;
}
.text {
color: green;
}
```
根据上述规则，`.text`类选择器具有最高的特定性，因此该段落文本将呈现绿色。即使我们将`.text`类选择器放在最后，这个规则仍然会覆盖其他规则，因为它具有!important声明：
```css
p {
color: red;
}
.container p {
color: blue;
}
.text {
color: green !important;
}
```
在这种情况下，该段落文本将呈现绿色。
