优先级和加载顺序共同决定样式生效规则：优先级高者胜出，相同时后写的覆盖前面的。

在网页开发中，css选择器的优先级和加载顺序直接影响样式最终如何呈现。很多人会混淆“哪个样式生效”到底是优先级决定的，还是代码书写顺序决定的。其实两者都重要，但作用方式不同。下面详细说明css选择器的优先级计算规则与加载顺序之间的关系。

一、CSS渲染的基本规则：优先级 + 源顺序

CSS引擎在确定某个元素应用哪些样式时，遵循两个核心原则：选择器优先级（Specificity）和源文件中的出现顺序（Source Order）。当多个规则作用于同一个元素时，浏览器会：

• 先根据选择器优先级判断哪条规则更“强”
• 如果优先级相同，则后出现的规则覆盖先出现的规则

也就是说，优先级高的胜出；优先级相同时，“后来者居上”。

二、选择器优先级如何计算

优先级是一个由四个维度组成的权重值，通常表示为：内联样式 > id选择器 > 类/属性/伪类 > 标签选择器。具体可拆解为一个四元组 (a, b, c, d)：

立即学习“前端免费学习笔记（深入）”；

• a：内联样式的存在（1 或 0）
• b：ID选择器的数量
• 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采用“源顺序”决定胜负 —— 即在样式表中写在后面的规则生效。

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

0

查看详情

无论样式是写在外部文件、内部style标签，还是行内style中，解析顺序通常是：

• 外部CSS文件按link引入顺序解析
• 内部style标签按文档中出现位置解析
• 行内样式最后考虑（但优先级最高）

举例：

<style>
  p { color: red; }
  p { color: blue; }
</style>

段落文字将显示为蓝色，因为两条规则优先级相同，后者覆盖前者。

四、!important 的特殊地位

使用 !important 可以提升声明的权重，使其忽略常规优先级和顺序规则。但需注意：

• !important 作用于单个属性，不是整个规则
• 带 !important 的声明优先级最高，除非另一个也带 !important 且选择器优先级更高
• 若两个都带 !important 且优先级相同，则仍按源顺序决定

不推荐滥用 !important，容易造成维护困难。

基本上就这些。理解优先级计算方式和加载顺序的配合机制，能帮你快速定位样式冲突问题，写出更可控的CSS代码。