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 —— 它会让后续维护变脆弱。更可控的做法有：
立即学习“前端免费学习笔记（深入）”；
- 提升
class规则的特异性：比如把.highlight改成div#main .highlight（100 + 1 + 10 = 111），就超过了单个id - 改用嵌套结构规避冲突：给需要特殊样式的元素加新
class，比如<div id="header" class="header--dark">，然后写.header--dark { background: #111; } - 用属性选择器模拟 id 效果但降低权重：比如
div[id="header"]权重是 11（1 个标签 + 1 个属性），比#header的 100 低得多，适合需要灵活覆盖的场景
容易被忽略的坑：伪类和组合符会影响权重
:hover、:focus 等伪类算作 10 分（等同于 class），所以 #nav:hover 是 100 + 10 = 110，而 .nav-item.active 是 10 + 10 = 20 —— 前者依然碾压。另外，空格（后代）、>（子元素）、+（相邻兄弟）这些组合符本身不加分，但会拉长选择器，间接提高整体权重。
真正难调的往往不是单个 id vs class，而是多层嵌套 + 伪类 + 属性选择器混用后，权重数字悄悄叠到 200+，这时候光靠「哪个写在后面」已经完全没法预测结果了。
