保存草稿
同一颗按钮被 button、.btn、[data-variant]、#save 同时命中。
color: #b45309工程与栈 · 开发基础
CSSCSS
同一条属性被多条规则命中时，按来源、!important、特异性和源顺序选出唯一胜出者；先找胜出规则，而不是堆 !important。
先认出这颗保存按钮，再看谁给它上色
下面就是设置卡上的那颗按钮：默认被 #save 涂成陶土色。切「只留类名」看它变苔绿；关掉全部规则，失败也写在同一颗按钮上。
胜出：#save · 1,0,0：胜出章盖在这颗按钮上。
原因：ID 特异性 1,0,0 高于类 0,1,0，按钮吃到 #save 的陶土色。下一步：试「只留类名」，或关掉全部规则看默认灰。
知识点：级联选出唯一胜出值
按钮上的章已经演示了裁决，这里只命名四层顺序。
- 来源：开发者样式覆盖浏览器默认；关掉全部规则就回到 user-agent。
- !important：整层凌驾普通声明；同层内仍比特异性和源顺序。
- 特异性：ID (1,0,0) > 类/属性 (0,1,0) > 元素 (0,0,1)。
- 源顺序：同级并列时，后声明的胜出。先找胜出规则，再决定要不要加 !important。
什么时候用、怎么用
写了规则但颜色不对时，按级联排查，而不是先堆 !important。
- 信号：样式没生效、同一按钮在不同页颜色不一致、准备加 !important。
- 适用：检查计算样式、被划掉的规则、特异性数字。
- 不适用：布局和间距问题优先看盒模型与层叠上下文，不是先改选择器权重。
- 最短路径：检查元素 → 看计算样式最终值 → 用最小特异性覆盖它。
正反例：同一颗按钮改成红色
目标都是改文字颜色，只换覆盖方式。
特异性 0,1,0，来源清楚，以后还能再覆盖。
特异性被绕过，别处再覆盖只能堆更高的 !important。失败写在按钮上那层「说不清谁赢」。
快速自测
按钮被 .btn（0,1,0）、#save（1,0,0）、button（0,0,1）同时命中且都未加 !important，颜色由谁决定？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。