CSS选择器优先级与加载顺序详解

CSS样式生效规则由选择器优先级和加载顺序共同决定。优先级高的选择器样式优先应用，当优先级相同时，后定义的样式会覆盖先定义的样式。本文深入解析CSS选择器的优先级计算方法，通过四元组 (a, b, c, d) 详细说明了内联样式、ID选择器、类/属性/伪类以及标签选择器的权重比较。同时，文章还阐述了CSS加载顺序对样式的影响，以及`!important`声明的特殊地位。理解这些机制，能帮助开发者快速定位样式冲突问题，编写出更易于维护的CSS代码。

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

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

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

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

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

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

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

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

• a：内联样式的存在（1 或 0）
• b：ID选择器的数量
• c：类、属性选择器、伪类的数量
• d：标签选择器和伪元素的数量

比较时从左到右逐位比较，高位优先。例如：

常见选择器优先级示例：

• 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标签按文档中出现位置解析
• 行内样式最后考虑（但优先级最高）

举例：

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

四、!important 的特殊地位

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

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

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

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~