id选择器权重是(0,1,0,0)而非“比class多10”，因css优先级按四元组(a,b,c,d)逐位比较，id仅贡献b位，高位胜出即终止比较，故十个类选择器(0,0,10,0)仍不敌一个id。
ID选择器权重为什么是(0,1,0,0)而不是“比class多10”
CSS优先级不是算术加法，而是按位比较的四元组 (a,b,c,d)：内联样式、ID个数、类/属性/伪类个数、元素/伪元素个数。ID选择器只贡献 b=1，类选择器只贡献 c=1；(0,1,0,0) 和 (0,0,10,0) 比较时，第二位 1 > 0，直接胜出——后面三位根本不会被读取。
- 写十个
.btn也压不过一个#submit，因为权重是(0,0,10,0)vs(0,1,0,0)，高位已定胜负 -
#nav .item:hover权重是(0,1,1,1)，不是 100+10+1；.nav .item:hover是(0,0,2,1)，前者必赢 - 嵌套再深（如
.a .b .c .d .e）也只增加d，最多到(0,0,0,5)，远不如一个 ID 的b=1
什么时候ID高反而成了坑
ID选择器优先级高，但语义上它代表「页面唯一」，滥用会导致复用困难、JS耦合、测试脆弱。现代 CSS 架构（如 BEM、CSS Modules）基本弃用 ID 做样式控制。
- 用
#header写全局布局样式 → 后续想在子模块复用 header 结构？不行，ID 冲突或需改 HTML - JS 里用
document.getElementById('modal')+ CSS 里用#modal→ 样式和逻辑强绑定，抽离组件时容易漏改一处 - 想覆盖一个 ID 规则？只能靠另一个 ID、内联样式或
!important—— 这三者都更难维护
真要覆盖ID样式，别硬刚权重
与其堆砌 #app #main #content .title 去压过别人 ID，不如换思路：删 ID、提 class、用 scoped 或属性选择器。
- 把
<div id="user-card"> 改成 <code><div class="card" data-type="user">，用 <code>[data-type="user"]替代 ID，权重仍是(0,0,1,0)，但可复用 - 在 Vue/React 中启用 CSS Scoped 或 CSS-in-JS，天然隔离，无需靠权重博弈
- 调试时发现 ID 规则生效了但不该生效？检查是否误用了 ID 当 class（比如重复 ID），浏览器只取第一个，其余被忽略
- 别指望“父级ID高 → 子元素自动继承高权重样式”，继承不传递权重
- 想让子元素沿用某样式？显式加 class，或用
currentColor/inherit等 CSS 值，而非依赖层叠 - 审查元素时看到“computed”里颜色来自父级，但“styles”面板没对应规则？大概率是继承值，权重为零，极易被任意选择器覆盖
继承样式为什么总被ID干掉
继承来的样式权重恒为 (0,0,0,0)，哪怕父元素是 #app（权重 (0,1,0,0)），子元素只要写一行 p { color: red; }（(0,0,0,1)），立刻覆盖继承值。
立即学习“前端免费学习笔记（深入）”；
(0,1,0,0)，而是在团队协作、长期迭代中，让样式既可靠又不僵硬——这时候，少一个 ID，往往比多十个 !important 更管用。
