在CSS样式开发过程中，样式冲突是经常会遇到的情况，其中内联样式和外部样式表的优先级对比是很多开发者容易混淆的问题。了解CSS优先级规则，能够帮助我们快速定位样式不生效的原因，合理规划样式代码结构。
CSS优先级的核心判定逻辑
CSS优先级用于判断当多个样式规则作用于同一个元素时，哪个规则会最终生效。优先级的高低由选择器的权重决定，权重越高的样式越优先生效。如果权重相同，则后定义的样式会覆盖先定义的样式。
权重的基本计算规则
CSS选择器的权重由四个部分组成，按从高到低的顺序排列为：
- 内联样式：权重值为1000
- ID选择器：权重值为100
- 类选择器、属性选择器、伪类选择器：权重值为10
- 元素选择器、伪元素选择器：权重值为1
- 通配符选择器、继承的样式：权重值为0
内联样式与外部样式表的优先级对比
内联样式是直接写在HTML元素的style属性中的样式，属于权重最高的选择器类型。外部样式表是通过link标签引入的.css文件中的样式，其选择器权重需要按照上述规则计算。
基础场景对比
我们通过一个简单示例来对比两者的优先级：
<!-- 外部样式表文件 style.css 内容 -->
/* 类选择器权重为10 */
.demo {
color: blue;
font-size: 16px;
}
/* ID选择器权重为100 */
#test {
color: green;
font-size: 18px;
}
<!-- HTML文件内容 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>优先级测试</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 内联样式权重为1000，高于外部样式表的ID选择器权重100 -->
<div id="test" class="demo" style="color: red; font-size: 20px;">测试文本</div>
</body>
</html>
上述示例中，div元素同时有外部样式表的ID选择器规则、类选择器规则，以及内联样式。最终文本颜色为红色，字体大小为20px，说明内联样式的优先级高于外部样式表的所有选择器规则。
特殊情况说明
如果在外部样式表的样式规则后添加!important声明，那么该样式的优先级会超过内联样式。但!important会破坏优先级的自然规则，除非必要不建议使用。
/* 外部样式表添加!important后，优先级超过内联样式 */
#test {
color: green !important;
font-size: 18px;
}
此时即使div有内联样式color: red，文本颜色也会显示为绿色。
优先级计算的常见误区
很多开发者会误以为选择器数量越多权重越高，实际上权重是各部分的数值相加，不会进位。比如11个类选择器的权重总和为110，依然低于1个ID选择器的权重100。
| 选择器组合 | 权重计算 | 总权重 |
|---|---|---|
| 1个ID选择器 + 1个类选择器 | 100 + 10 | 110 |
| 11个类选择器 | 10 * 11 | 110 |
| 内联样式 | 1000 | 1000 |
实际开发中的优先级使用建议
为了避免优先级混乱导致的问题，建议遵循以下开发规范：
- 尽量减少内联样式的使用，将样式统一放在外部样式表中，便于维护
- 避免使用过多的ID选择器，防止权重过高难以覆盖
- 不要滥用
!important，除非是覆盖第三方库的样式且没有其他方案 - 相同权重的样式，按照引入顺序和定义顺序，后定义的覆盖先定义的
掌握CSS优先级规则后，我们可以在开发中合理设计选择器，减少不必要的样式冲突，提升代码的可维护性。