在CSS样式体系中，不同来源的样式会根据固定的优先级规则进行覆盖判定，其中嵌入样式和外部样式是开发中常用的两种样式引入方式，明确两者的优先级关系能帮助我们更高效地控制页面样式表现。
CSS样式优先级的核心规则
CSS样式的优先级判定遵循一套固定的权重计算规则，所有样式来源都会按照这个规则进行权重对比，权重更高的样式会最终生效。优先级权重从高到低大致可以分为以下几个层级：
- 内联样式：直接写在HTML元素
style属性中的样式，权重最高 - 嵌入样式：写在HTML页面
<style>标签内的样式 - 外部样式：通过
<link>标签引入的外部CSS文件中的样式 - 浏览器默认样式：浏览器自带的默认样式规则
需要注意的是，当嵌入样式和外部样式的选择器权重相同时，后加载的样式会覆盖先加载的样式，这是判断两者优先级的重要补充规则。
嵌入样式与外部样式的优先级对比
首先我们通过基础示例来演示两者的优先级表现，先准备一个外部CSS文件style.css，内容如下：
/* style.css 外部样式文件 */
.box {
width: 200px;
height: 200px;
background-color: blue;
}
然后编写HTML页面，同时引入外部样式和添加嵌入样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式优先级测试</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="style.css">
<!-- 嵌入样式 -->
<style>
.box {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在这个示例中，外部样式和嵌入样式都使用了类选择器.box，选择器权重相同。由于嵌入样式写在<link>标签之后，属于后加载的样式，因此最终.box元素的背景色会显示为红色，也就是嵌入样式覆盖了外部样式。
不同加载顺序下的优先级变化
如果我们调整加载顺序，把嵌入样式放在外部样式引入之前，代码修改如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式优先级测试</title>
<!-- 嵌入样式放在外部样式之前 -->
<style>
.box {
background-color: red;
}
</style>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
此时外部样式后加载，因此外部样式中的background-color: blue会覆盖嵌入样式的background-color: red，最终元素背景色显示为蓝色。
选择器权重不同时的优先级判定
如果两者的选择器权重不同，那么优先级由权重更高的选择器决定，和加载顺序无关。比如外部样式使用ID选择器，嵌入样式使用类选择器：
/* style.css 外部样式文件 */
#box {
background-color: blue;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式优先级测试</title>
<link rel="stylesheet" href="style.css">
<style>
.box {
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
ID选择器的权重高于类选择器，因此无论两者的加载顺序如何，最终元素背景色都会显示为蓝色，也就是外部样式生效。
使用!important时的优先级变化
如果在样式属性后添加!important声明，该样式的优先级会被提升到最高，覆盖其他所有非!important的同属性样式。比如嵌入样式添加!important：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式优先级测试</title>
<link rel="stylesheet" href="style.css">
<style>
.box {
background-color: red !important;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
此时即使外部样式后加载，嵌入样式中的background-color: red !important也会覆盖外部样式的背景色设置，最终元素背景色显示为红色。
优先级判定总结
综合上述测试，我们可以总结出嵌入样式和外部样式的优先级判定逻辑：
| 场景 | 优先级结果 |
|---|---|
| 选择器权重相同，嵌入样式后加载 | 嵌入样式覆盖外部样式 |
| 选择器权重相同，外部样式后加载 | 外部样式覆盖嵌入样式 |
| 嵌入样式选择器权重更高 | 嵌入样式生效，与加载顺序无关 |
| 外部样式选择器权重更高 | 外部样式生效，与加载顺序无关 |
| 嵌入样式属性添加!important | 嵌入样式属性生效，覆盖外部样式对应属性 |
| 外部样式属性添加!important | 外部样式属性生效，覆盖嵌入样式对应属性 |
在实际开发中，我们建议尽量统一样式引入方式，避免混合使用嵌入样式和外部样式导致的优先级混乱，如果需要覆盖样式，优先通过提高选择器权重的方式实现，谨慎使用!important声明，避免后续样式维护难度提升。