根本原因是加载顺序优先于权重，!important仅在同批解析规则中生效；后加载的普通样式会覆盖先加载的!important声明，与选择器权重无关。
为什么 !important 有时也压不住样式？
根本原因不是优先级不够，而是它被写在了**更早加载、但被后续同名规则覆盖的样式表里**。浏览器按 HTML 中 <link> 和 <style></style> 的出现顺序逐条解析 CSS，后加载的规则哪怕权重更低，也能覆盖先加载的高权重规则——!important 只在「同一层比较」中生效，不跨加载时序。
常见错误现象：
/* styles1.css（先引入） */
.button { color: red !important; }
<p>/<em> styles2.css（后引入） </em>/
.button { color: blue; }结果是蓝色，因为 styles2.css 的普通声明覆盖了 styles1.css 的 !important 声明——这不是权重失效，而是加载顺序让后者根本没有参与“权重比拼”。
- 检查 HTML 中
<link rel="stylesheet">和<style></style>标签的排列顺序，靠后的样式表天然具有更高“时间优先级” - 把基础重置（如
normalize.css）、通用工具类（如tailwind.css）放在最前面；业务组件样式、页面专属样式放在最后 - 避免在多个独立 CSS 文件中对同一选择器重复定义，尤其含
!important时
inline-style、<style></style>、<link> 的实际加载层级
三者不是按“书写位置”而是按“解析执行时机”排序：内联样式（）最晚解析，所以最高；<style></style> 次之；外部 <link> 最早（除非用了 rel="preload" 或异步加载）。但注意：如果 <style></style> 写在 <link> 后面，它的规则仍会覆盖前面 <link> 的同名规则。
典型陷阱：
<head>
<link rel="stylesheet" href="base.css">
<style>.card { padding: 10px; }</style>
<link rel="stylesheet" href="theme.css"> <!-- 这个会覆盖上面的 <style>！-->
</head>即使 <style></style> 是内嵌的，只要 theme.css 在它之后加载，就仍能覆盖它。
- 内联样式（
style="..."）无法被任何外部 CSS 覆盖，除非 JS 动态改写element.style -
<style></style>标签内容等效于一个“立即执行的<link>”，位置决定它和外部文件的相对顺序 - 用 Chrome DevTools 的 Elements 面板看某个元素的 Computed 样式，点击右侧 Styles 标签页，被划掉的规则就是被后续加载的规则覆盖了
选择器权重计算与加载顺序的叠加效应
权重（specificity）只在「同一份样式表内」或「同一批解析的样式规则中」起作用。当规则来自不同来源且加载时间不同，浏览器先按加载顺序分组，再在每组内比权重。这意味着：一个低权重但后加载的规则，可以轻松干掉一个高权重但先加载的规则。
例如：
/* reset.css（最早加载） */
* { box-sizing: border-box !important; } /* 权重 0,0,0,0 + important */
<p>/<em> component.css（稍后） </em>/
.card { box-sizing: content-box; } /<em> 权重 0,0,1,0 —— 普通，但后加载，所以生效 </em>/尽管 * { ... !important } 权重极低，但它带 !important；而 .card 不带 !important，但因为它出现在后面，直接跳过权重比较，直接覆盖。
- 权重公式仍是：内联 > ID > 类/属性/伪类 > 元素/伪元素，但这个公式不跨文件、不跨加载批次
- 用 DevTools 的 Styles 面板观察某条被覆盖的样式，左侧会出现灰色箭头图标，悬停可看到“overridden by”提示及来源文件行号
- 想强制某条规则不被覆盖？要么确保它在最后加载，要么加
!important并确认没有更晚的同名规则（含内联）
动态插入 CSS 时的顺序陷阱
JS 动态创建 <link> 或 <style></style> 并 appendChild() 到 ，默认插在末尾——这通常是你想要的；但如果手动用 insertBefore() 插到前面，或用 document.write()（已废弃），就可能打乱预期顺序。
立即学习“前端免费学习笔记（深入）”；
典型问题：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'custom.css';
document.head.insertBefore(link, document.head.firstChild); // 插到最前 → 可能被后面所有样式覆盖
- 动态插入的样式默认追加到
末尾，行为可靠；若需插到特定位置，务必确认该位置是否真“靠后” - 避免在
window.onload之后插入样式，此时页面已渲染完成，插入可能触发重排，且顺序更难控制 - 使用
CSSStyleSheet.insertRule()直接向现有样式表追加规则，可精确控制插入位置（如sheet.insertRule(..., sheet.cssRules.length)确保追加到末尾）
加载顺序是 CSS 覆盖逻辑的底层开关，权重只是它内部的“裁判”。很多看似诡异的覆盖失效，其实只是你没看清哪条规则真正“活到了最后”。
