style 标签与 link 标签优先级无绝对高低，同属作者样式表，实际由声明顺序和选择器特异性共同决定：后出现者覆盖先出现者，特异性高者胜出。
style 标签和 link 标签的优先级到底谁更高？
单纯看「内联样式 > style > link」这个说法容易误判。真实优先级由三部分共同决定：来源（origin）、层叠顺序（cascade order）、特异性（specificity）。其中 <style> 和 <link rel="stylesheet"> 默认同属「作者样式表（author stylesheet）」，来源相同，真正起作用的是它们在 HTML 中的**出现顺序**和内部规则的特异性。
为什么后引入的 CSS 文件没覆盖掉 style 里的样式？
常见误解是「外部 CSS 一定比内联 style 弱」。实际中，如果 <style> 块写在 <link> 之后，它反而会覆盖前面 link 加载的样式——因为层叠顺序按 DOM 中声明位置从上到下计算。反过来，若 <link> 在 <style> 后面，且选择器特异性相同，那 link 的规则才生效。
-
<head>中先<link href="a.css">，再<style>.btn { color: red; }</style>→.btn显示红色 - 调换顺序：先
<style>，再<link>→ 若a.css里也有.btn { color: blue; }，则显示蓝色 - 但若
<style>里写的是div .btn（特异性 0,1,1），而a.css里是.btn（0,1,0），哪怕<style>在前，仍会覆盖
如何快速定位是哪个 style 或 link 在生效？
浏览器开发者工具（F12）的「Computed」面板只显示最终结果，要查来源得看「Styles」侧边栏。注意三点：
- 每条样式旁有文件名或
<style>字样，点击可跳转到源位置 - 被划掉的样式 ≠ 无效，可能是被后面同选择器、更高特异性或更晚声明的规则覆盖
- 若看到
element.style（即内联属性），它优先级高于所有外部和内部样式表，除非加!important
用 @import 替代 link 会改变优先级吗？
会，而且通常让事情更难理清。@import 写在 <style> 块里时，其加载的 CSS 被视为该 <style> 块的一部分，层叠顺序按 @import 所在位置算；但如果写在 CSS 文件顶部（如 a.css 开头有 @import "b.css";），则 b.css 的规则会插入到 a.css 的对应位置，可能打乱你预期的先后关系。
立即学习“前端免费学习笔记（深入）”；
更关键的是：@import 是阻塞式加载，且不支持媒体查询条件提前过滤（<link media="print"> 可以异步加载不影响屏幕渲染）。现代项目应避免在 CSS 中用 @import，统一用 <link> 控制顺序和资源加载时机。
/* ❌ 不推荐：在 style 标签里 import，语义模糊，调试困难 */
<style>
@import url("theme.css");
.card { border: 1px solid #ccc; }
</style>
<p>/<em> ✅ 推荐：显式 link，顺序可控 </em>/
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="custom.css">最常被忽略的一点：CSS 加载是异步的，<link> 的实际解析完成时间可能晚于 <style> 块，尤其在网络慢或文件大时。如果你依赖 JS 动态读取样式值，务必确认 CSS 已加载完毕（监听 load 事件或用 CSSStyleSheet.replace() 等现代 API）。
