权重按位比较：(a) 内联 style，(b) ID 选择器个数，(c) 类/伪类/属性选择器个数，(d) 元素/伪元素个数。从左到右逐位比对，大的赢；全部相同则后写的赢（层叠顺序）。通配符 *、组合符与继承不占权重。
!important 会把声明提到「来源优先级」更高的层，比选择器权重还高——它是逃生通道而不是常规武器。日常开发的坏味道：满屏 !important 往往意味着选择器层级没规划好（比如把 BEM 扁平类名嵌进了层叠依赖里）。
<style> #btn { color: #fff; } /* 权重 1,0,0,0 */ .wrap .btn { color: #e78a3e; } /* 权重 0,0,2,0 依然输 */ button { color: #a371f7; } /* 权重 0,0,0,1 直接被碾压 */ </style> <div class="wrap"> <button id="btn" class="btn">我是白色（ID 胜出，无论顺序）</button> </div>