class样式被id或内联样式覆盖的根本原因是CSS优先级计算规则：id权重100、class权重10、元素权重1、内联样式权重1000，浏览器按权重而非书写顺序决定生效样式。
为什么 class 样式总被 id 或内联样式盖掉
根本原因是 CSS 优先级（specificity）计算规则：浏览器不是看谁写在后面，而是按选择器类型加权算分。一个 id 选择器（如 #header）的权重远高于十个 class（如 .btn.btn-primary.btn-large），更不用说内联样式 style="color: red" 直接是 1000 分起步。
常见错误现象：class 写了却没生效，开发者工具里看到样式被划掉、显示“overridden”；或者临时加 !important 勉强解决，但后续维护越来越难。
-
id选择器权重 = 100 -
class/attribute/pseudo-class权重 = 10 - 元素标签 /
pseudo-element权重 = 1 - 内联
style属性 = 1000（不推荐用于常规样式控制）
什么时候该用 id，什么时候必须用 class
id 的本质是唯一标识符，语义上代表“页面中仅此一个”的元素。滥用 id 做样式控制，既违反语义，又人为抬高优先级，堵死后续覆盖路径。
合理分工：
立即学习“前端免费学习笔记（深入）”；
- 用
id：锚点跳转（href="#section2"）、label[for="email"]关联表单、JS 获取单个元素（document.getElementById("submit")） - 用
class：所有可复用的视觉样式、状态（.is-active）、布局（.grid-col-3）、主题变体（.theme-dark） - 避免：给多个按钮都加
id="btn"，或写#nav li a { color: blue }做通用链接样式
提升 class 优先级的正当手段
不靠 !important，也不靠堆砌 id，而是用更精确、更语义化的类名组合来自然提高 specificity。
.card .card__title { font-size: 1.25rem; }
.card--featured .card__title { font-size: 1.5rem; }
.card--featured.card--compact .card__title { font-size: 1.375rem; }
上面三行中，第三行权重为 20（两个 class），高于第二行的 10，也无需改 HTML 结构。关键点：
- 采用 BEM 或类似命名规范，让组合有意义（
.btn.btn--primary.btn--large） - 避免过度嵌套：
.sidebar ul li a权重才 3，不如.nav-link+.nav-link--secondary清晰可控 - 必要时用属性选择器补位：
[data-state="loading"]权重 = 10，和 class 同级，且语义明确
调试时快速定位覆盖来源
打开浏览器开发者工具，在 Elements 面板选中元素，右侧 Styles 标签页里，被划掉的样式就是被更高优先级规则覆盖了。注意看每条规则前的文件名和行号，再点开左侧小箭头，能看到完整选择器字符串。
容易忽略的坑：
- 第三方 UI 库（如 Bootstrap）用了大量
!important，导致你的class完全无效——这时应优先通过库提供的自定义变量或主题机制覆盖，而非硬刚 - CSS-in-JS 方案（如 styled-components）默认带哈希类名，权重和普通 class 一样，但作用域隔离，反而降低冲突概率
- Vue/React 组件中
<style scoped></style>会自动添加属性选择器（如.btn[data-v-f3f3f]），权重+10，实际等于多了一个 class
真正棘手的从来不是“怎么提高优先级”，而是“谁不该拥有这么高的优先级”。删掉一个滥用的 id 选择器，往往比加十个 class 更有效。
