内联样式 > 内部样式表 > 外部样式表，优先级由选择器权重（id>类>标签）和来源类型共同决定，而非加载顺序；@import在<style>中受其整体权重约束，!important仅作用于单个声明且不可继承。
内联样式、内部样式表、外部样式表的优先级怎么排
优先级不是按“谁后加载谁赢”，而是按选择器权重 + 来源类型决定的。三者默认顺序是：内联样式 > <style> 内部样式 > @import 或 <link> 外部样式。但注意：@import 如果写在 <style> 里，它的规则会受该 <style> 块整体权重约束，而不是独立计算。
常见误区是以为外部 CSS 文件写在 HTML 后面就一定覆盖内部样式——其实只要没用 !important，且选择器权重相同，后加载的外部样式确实会覆盖前面同权重的内部样式；但一旦内部样式用了更具体的选择器（比如 .container .btn:hover），它就可能压过外部样式里较弱的 .btn。
- 权重计算看：ID 数量 > 类/伪类/属性选择器数量 > 标签/伪元素数量
-
!important会提升声明级优先级，但仅对单个声明生效，且不能跨来源“继承” -
内联样式的权重固定为 1000，比绝大多数 CSS 选择器都高
为什么外部样式有时不覆盖内部样式，即使它在 </head> 里后引入
根本原因常是选择器 specificity 不够，而非加载顺序问题。比如内部样式写了 #header .nav a.active（权重 112），而外部样式只写了 .nav-link.active（权重 20），那无论外部 CSS 放在哪，都不会生效。
另一个隐蔽原因是 @import 的位置和解析时机：@import 必须写在 <style> 块最前面，否则会被忽略；而且它会阻塞后续 CSS 解析，容易造成样式闪烁或意外覆盖。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具的“Computed”面板，看哪条规则被划掉，以及“Styles”里带删除线的来源
- 避免在
<style>中混用@import和普通规则，改用<link rel="stylesheet">引入外部文件 - 如果必须用
@import，确保它在<style>第一行，且导入的文件本身不含更高权重的冲突规则
如何快速定位和解决内部与外部样式的冲突
别靠猜，直接用 DevTools 的“Rules”面板逐行对比。重点看每条声明右侧的小箭头图标——点开会显示该规则来自哪个文件、哪一行，还能看到是否被更高权重的规则覆盖。
- 临时禁用某条规则：点击左侧复选框，观察页面变化，确认是否是它导致冲突
- 复制冲突的选择器，在控制台运行
getComputedStyle(document.querySelector("xxx"))验证最终生效值 - 用
[data-debug]这类唯一属性临时加到元素上，写一条高权重调试规则（如[data-debug] { outline: 2px solid red !important; }），快速验证作用域
要不要用 !important 解决冲突
可以，但只该用于覆盖第三方库或无法修改的内联样式，比如某些 UI 框架强制设置的 style="display: none"。把它当成创可贴，不是设计原则。
滥用 !important 会让维护雪球越滚越大：你加一个，别人就得加两个来覆盖，最后整个项目全是 !important，权重彻底失效。
- 优先重构选择器，用更具体的上下文（如
.my-app .button-primary）代替!important - 如果必须用，写在外部样式里，别分散在多个
<style>块中，方便统一清理 - 团队协作时，在 CSS 预处理器中用变量控制
!important开关（如$force: true），避免硬编码
.btn 在内部样式里定义为蓝色，在外部组件库里却是绿色，这时候光调优先级没用——得靠 BEM、CSS Modules 或 Shadow DOM 划清地盘。 
