CSS基础教程（八）创建样式表之多重样式：CSS样式在“斗舞”？揭秘多重样式“大乱斗”中的生存法则！

深度分析CSS创建样式表之多重样式

你是否曾有过这样的经历：你精心编写了一个p {color: blue;}的样式，满心期待地刷新浏览器，却发现你的段落文本倔强地显示为红色？你疯狂检查代码，确认没有写错，最后在另一个样式表文件的角落里发现了一句p {color: red !important;}。

这一刻，你感受到的不是代码的恶意，而是CSS层叠（Cascade）规则的无情与强大。

欢迎来到CSS的“多重样式”世界！这里没有绝对的命令，只有一场由特异性（Specificity）、重要性（Importance）、源码顺序（Source Order）和继承（Inheritance）共同裁决的“权力游戏”。理解这场游戏，是你从CSS新手进阶为样式操控大师的必经之路。

第一章：多重样式从何而来？—— “装修队”的入场券

所谓“多重样式”，指的是同一个HTML元素可以被多个CSS规则集所定义。想象一下，你买了一套毛坯房（HTML结构），同时来了三批装修队（CSS样式来源）都想给你装修：

1. 业主自装（作者样式表）：这是你，网页的创作者，亲手写的样式。这是最主要的样式来源，可能存在于多个CSS文件或<style>标签中。
2. 物业精装（用户样式表）：一些追求个性化的用户，会通过浏览器插件或设置，给自己常去的网站定义一套自己的样式（比如全局启用暗黑模式）。
3. 开发商统一装修（用户代理样式表）：这是浏览器自带的默认样式。如果你什么都没写，<h1>就会大而粗，<a>就是蓝色带下划线。这是最底层的“基础装修”。

当这三批“装修队”对“墙面颜色”（比如color属性）提出了不同的要求时，浏览器这位“项目经理”就必须根据一套严格的规则来裁决最终采用哪个方案。

第二章：核心裁决规则—— “权力游戏”的宪法

浏览器的裁决过程被称为“层叠”（Cascade）。它主要依据以下四个因素，其权重依次降低：

1. 重要性（Importance）：是否使用了!important声明。
2. 特异性（Specificity）：选择器的具体程度。
3. 源码顺序（Source Order）：代码的先后顺序。

规则一：!important—— 核武器级别的指令

在CSS中，在任何属性值后面加上!important，