在CSS（层叠样式表）中，样式定义的优先级是非常关键的概念，它决定了当多个样式规则同时作用于一个元素时，哪个规则会被应用。理解这个优先级顺序有助于开发者更精确地控制页面的呈现效果。下面我们将深入探讨CSS样式的优先级顺序。
我们来看一下基本的优先级顺序：
1. **内联样式**（Inline styles）：这是通过在HTML元素的`style`属性中直接定义的样式，具有最高的优先级。例如，`<p style="color:red;">文本</p>`。
2. **内部样式表**（Internal stylesheets）：这些样式定义在HTML文档的`<head>`部分的`<style>`标签内。它们的优先级低于内联样式，但高于外部样式表。例如：
```html
<head>
<style>
p { color: blue; }
</style>
</head>
```
3. **外部样式表**（External stylesheets）：这是通过`<link>`标签引用的CSS文件，优先级最低。有两种引入方式：
- 使用`<link>`标签：`<link rel="stylesheet" href="styles.css">`
- 使用`@import`规则：`<style>@import "styles.css";</style>`。`@import`的优先级高于`<link>`，但在Internet Explorer中，使用`@import`可能会导致阻塞，使得资源下载顺序混乱，因此通常不推荐使用。
在外部样式表中，即使同一级别的样式表，优先级也遵循以下规则：
4. **ID选择器**（ID selectors）：使用`#`定义的ID选择器具有很高的优先级，如`#myId{}`。
5. **类选择器**（Class selectors）：使用`.`定义的类选择器，如`.myClass{}`，优先级低于ID选择器。
6. **类派生选择器**（Class descendant selectors）：这种选择器由两个或更多个选择器组成，中间用空格分隔，如`div p{}`。优先级低于单独的类选择器。
7. **元素选择器**（Element selectors）：例如`p{}`，是最基本的选择器，优先级最低。
8. **通配符选择器**（Universal selector）：`*{}`，优先级最低。
9. **伪类和伪元素**（Pseudo-classes and pseudo-elements）：如`:hover`、`:first-child`等，其优先级根据具体情况而异，但通常比元素选择器高。
10. **属性选择器**（Attribute selectors）：如`[target="_blank"]`，优先级高于元素选择器。
11. **组合选择器**（Combinator selectors）：如`+`、`~`、`>`等，它们不会增加优先级，但会影响选择器的特异性（specificity）。
当多个选择器同时作用于一个元素时，CSS会计算它们的**特异性**（specificity），这是一个基于选择器类型数量的计数系统。具体来说，特异性分为四部分：ID选择器的数量、类选择器和属性选择器的数量、元素选择器和伪元素的数量、伪类的数量。例如，`#id .class element`的特异性为101。
如果两个选择器具有相同的特异性，那么会按照样式表的顺序来决定优先级，即"后出现的覆盖先出现的"（last one wins），这被称为层叠规则（cascading）。
理解并熟练运用CSS样式的优先级顺序是优化网页设计和确保样式一致性的重要技能。开发者应谨慎使用内联样式，因为它们虽然优先级最高，但可能导致代码难以维护。同时，合理利用ID选择器、类选择器以及组合选择器，可以有效提升代码的可读性和复用性。
