CSS基础教程（九）创建样式表之多重样式优先级：CSS奇葩说：当多个样式“抢着”给你打扮时，浏览器听谁的？——深度揭秘选择器权重の大乱斗

第一章：一场突如其来的“ styling 抢夺战”

想象一下，你是一个刚刚出道的HTML<div>明星，今天要出席一场名为“浏览器渲染”的盛大晚会。你的经纪人（开发者）为你请来了三位顶级的造型师（CSS样式表）：

1. 托尼老师（外部样式表）：这位老师资历最深，掌握着全球最新潮的流行趋势，他通过一个.css文件告诉你：“今晚你的颜色是皇家蓝！”。
2. 阿强总监（内部样式表）：负责本次晚会整体造型的艺术总监，他在HTML文档的<style>标签里紧急下令：“不行！根据晚会主题，你的颜色必须是烈焰红！”。
3. 琳达助理（内联样式）：就在你即将踏上红毯的前一秒，你的贴身助理冲过来，直接在的你身上（HTML标签的style属性里）用马克笔写下：“老板刚来电，必须穿土豪金！立刻！马上！”。

此刻，你懵了。三位造型师都无比权威，你该听谁的？你的最终颜色会是什么？

别急，这场“抢夺战”的最终裁决者——浏览器，可不是凭感觉办事的傻白甜。它手中有一本非常清晰、甚至有些冷酷的“宪法”，名叫 CSS优先级（CSS Specificity）。

第二章：宪法核心——特异性权重（Specificity）计算规则

浏览器的裁决规则不是看谁后出场，也不是看谁嗓门大，而是看谁手中的“权力筹码”更重。这个筹码就是特异性权重。它不是一个简单的数值，而是一个由四个部分组成的（a, b, c, d） 元组：

1. a (千位)：是否包含内联样式（即写在HTML标签style属性中的样式）。有则为1，无则为0。注意：这里的1代表10