id 的样式优先级高于 class，因特异性计算中 id 权重为 100、class 为 10；可通过开发者工具 Styles 面板查看生效规则与覆盖原因；提升 class 特异性、改用嵌套 class 或属性选择器可安全覆盖 id 样式。
id 和 class 同时作用于一个元素时，谁赢？
直接说结论：id 的样式优先级高于 class，无论它们在 CSS 文件里谁先定义、谁后定义。这不是“谁写在后面谁生效”，而是浏览器计算「特异性（specificity）」的结果——id 选择器的权重是 100，而普通 class 是 10，所以哪怕你写 .btn { color: red; } 在后，#header { color: blue; } 在前，只要两者都匹配同一个元素，blue 依然生效。
怎么查当前元素实际生效的是哪条规则？
打开浏览器开发者工具（F12），选中元素，在「Styles」面板里看：
- 被划掉的样式 = 被更高优先级规则覆盖了
- 没被划掉但灰掉的 = 这条规则没匹配到该元素（比如写错了
class名或漏了空格） - 带「
inline」标记的 = 行内样式（优先级 1000，比id还高）
重点看右侧是否标有 #xxx 或 .xxx，就能快速定位冲突源头。
想让 class 覆盖 id 样式，有哪些靠谱办法？
不推荐强行用 !important —— 它会让后续维护变脆弱。更可控的做法有：
