ID选择器权重(0,1,0,0)高于十个类选择器(0,0,10,0)，因CSS权重按四元组(a,b,c,d)逐位字典序比较，b位1>0即终止比较，c位10不参与判定。
ID选择器的（0,1,0,0）优先级更高，不是因为“1比10大”，而是CSS权重比较是逐位进行的：先比a位，再比b位，一旦某一位分出大小，后面所有位都不再参与比较。
为什么（0,1,0,0）赢过（0,0,10,0）？
CSS权重本质是四元组 (a,b,c,d) 的字典序比较，不是十进制加法。两个权重从左到右依次对比：
-
(0,1,0,0)和(0,0,10,0)的 a 位都是 0 → 继续比 - b 位：1 vs 0 → 1 > 0 → 比较终止，
(0,1,0,0)胜出 - c 位的 10 根本不会被读取，d 位同理
#header 和 .btn.btn.btn.btn.btn.btn.btn.btn.btn.btn 哪个生效？
哪怕你写十个 .btn 并用空格连起来（即 .btn .btn .btn ...），只要没 ID，它仍是 (0,0,10,0)；而一个 #header 是 (0,1,0,0) —— 后者必胜。
常见错误是以为“堆 class 能压过 ID”，实际完全无效。真正能覆盖 ID 的只有：
立即学习“前端免费学习笔记（深入）”；
- 内联样式：
style="color: red;"→(1,0,0,0) - 带
!important的规则（但会破坏可维护性） - 另一个 ID + 更多类/元素（如
#header.nav.active→(0,1,2,0)）
什么时候 ID 的高权重反而坏事？
ID 语义上代表“全局唯一”，但用在样式里容易导致：
- 组件无法复用（
#submit只能用一次） - JS 依赖 ID 绑定事件，改结构时容易断裂
- 测试难写，因为 ID 不易 mock 或隔离
- 团队协作时，新人不敢动 ID 样式，怕影响别处
现代 CSS 实践中，id 更适合用作锚点或 JS hook，而非样式依据。真正需要复用和组合的场景，应靠 BEM 类名或 CSS-in-JS 解决。
