优先级和加载顺序共同决定样式生效规则：优先级高者胜出，相同时后写的覆盖前面的。
在网页开发中，CSS选择器的优先级和加载顺序直接影响样式最终如何呈现。很多人会混淆“哪个样式生效”到底是优先级决定的，还是代码书写顺序决定的。其实两者都重要，但作用方式不同。下面详细说明CSS选择器的优先级计算规则与加载顺序之间的关系。
一、CSS渲染的基本规则：优先级 + 源顺序
CSS引擎在确定某个元素应用哪些样式时，遵循两个核心原则：选择器优先级（Specificity）和源文件中的出现顺序（Source Order）。当多个规则作用于同一个元素时，浏览器会：
- 先根据选择器优先级判断哪条规则更“强”
- 如果优先级相同，则后出现的规则覆盖先出现的规则
也就是说，优先级高的胜出；优先级相同时，“后来者居上”。
二、选择器优先级如何计算
优先级是一个由四个维度组成的权重值，通常表示为：内联样式 > ID选择器 > 类/属性/伪类 > 标签选择器。具体可拆解为一个四元组 (a, b, c, d)：
立即学习“前端免费学习笔记（深入）”；
比较时从左到右逐位比较，高位优先。例如：
#header .nav li:hover → (0,1,2,1)ul ol li.active → (0,0,1,3)
第一个优先级更高，因为b位1 > 0
常见选择器优先级示例：
- div → (0,0,0,1)
- .title → (0,0,1,0)
- #main → (0,1,0,0)
- style="..." → (1,0,0,0)
- !important — 特殊情况，见下文
三、加载顺序的影响：后写的覆盖前面的
当两个规则的选择器优先级完全相同时，CSS采用“源顺序”决定胜负 —— 即在样式表中写在后面的规则生效。
无论样式是写在外部文件、内部style标签，还是行内style中，解析顺序通常是：
- 外部CSS文件按link引入顺序解析
- 内部style标签按文档中出现位置解析
- 行内样式最后考虑（但优先级最高）
举例：
<style>p { color: red; }
p { color: blue; }
</style>
段落文字将显示为蓝色，因为两条规则优先级相同，后者覆盖前者。
四、!important 的特殊地位
使用 !important 可以提升声明的权重，使其忽略常规优先级和顺序规则。但需注意：
- !important 作用于单个属性，不是整个规则
- 带 !important 的声明优先级最高，除非另一个也带 !important 且选择器优先级更高
- 若两个都带 !important 且优先级相同，则仍按源顺序决定
不推荐滥用 !important，容易造成维护困难。
基本上就这些。理解优先级计算方式和加载顺序的配合机制，能帮你快速定位样式冲突问题，写出更可控的CSS代码。
