后出现的样式规则覆盖前面同选择器、同特异性的声明；实际生效取决于物理顺序与特异性双重规则，特异性优先于顺序。
外部样式表 <link> 和内部样式 <style></style> 谁先生效？
没有“谁天生优先”，只看它们在 HTML 中的物理顺序：后出现的样式规则，会覆盖前面同选择器、同特异性的声明。比如 <style></style> 写在 <link> 后面，且都定义了 p { color: red }，那内部样式生效；反过来，外部样式就赢。
常见错误现象：<link rel="stylesheet" href="base.css"> 放在 <style></style> 前面，结果自定义颜色不生效——不是因为“外部不如内部”，而是你没意识到 base.css 里用了更具体的选择器（如 .content p），它的特异性压过了你 <style></style> 里的 p。
-
<link>是独立 HTTP 请求，浏览器会阻塞渲染直到 CSSOM 构建完成；<style></style>是内联解析，无额外请求，但会增大 HTML 体积 - 如果
<style></style>里用了@import url("theme.css")，它实际是异步加载、插入位置不可控，极易打乱预期顺序，生产环境应禁用 - 框架（如 Vue 的
<style scoped></style>）或构建工具（如 Vite 的 CSS 拆分）可能重写加载顺序，需检查最终生成的 HTML 源码确认真实位置
为什么有时 <style></style> 明明在后面，还是被外部 CSS 覆盖？
因为特异性（specificity）碾压了顺序。CSS 不是“后来者居上”的简单队列，而是先比权值，再比顺序。
例如：
/* external.css */
#header .nav-item { color: blue; } /* specificity: 101 */
<p>/<em> <style> in head </style></em>/
.nav-item { color: red; } /<em> specificity: 10 </em>/
</p>
即使 <style></style> 在 <link> 后面，#header .nav-item 仍会胜出——ID 选择器（100） + 类选择器（10） > 单个类选择器（10）。
- 检查冲突时，别只盯
里谁写在后面，要用浏览器开发者工具的 “Computed” 面板看最终生效的 rule 来源和 specificity 值 - 避免靠堆 ID 或内联
!important解决覆盖问题，优先重构选择器粒度，比如把外部样式中的#app .btn改成.app-btn，让双方 specificity 对齐 - 第三方 UI 库（如 Bootstrap）常大量使用高特异性组合，自定义样式时建议用相同层级（如也加
.btn-primary）而非降级为标签选择器
<link> 的 media 属性会影响加载和优先级吗？
会，但只影响“是否参与本次渲染”，不影响“参与时的权重”。media="print" 的样式表在屏幕浏览时完全不解析，自然不参与任何优先级计算；而 media="(min-width: 768px)" 在小屏下静默失效，大屏下才和其他样式公平竞争。
- 默认
media="all"，等价于不写；漏写media不会导致报错，但可能意外触发媒体查询逻辑 - 动态切换
media值（如 JS 修改link.media = "screen"）会触发样式重计算，但不会重新发起网络请求 - 不要用
media="not all"试图“禁用”某个样式表——它无效，浏览器仍会加载并解析，只是不应用
服务端注入或 JS 动态添加的 <style></style> 怎么算顺序？
按 DOM 插入时刻的节点位置算，不是按代码书写顺序。JS 执行 document.head.appendChild(styleEl)，这个 <style></style> 就等效于写在 HTML 最末尾的 <style></style> —— 它能覆盖所有先前加载的 <link> 和静态 <style></style>，只要选择器特异性不更低。
容易踩的坑：
- Vue/React 组件中
<style scoped></style>或useEffect(() => { injectStyle() })注入的样式，实际插入位置取决于组件挂载时机，可能晚于全局<link>，也可能被其他组件样式覆盖 - SSR 渲染的 HTML 已含
<style></style>，但客户端 hydration 后又执行 JS 注入新<style></style>，此时后者拥有最高物理顺序，但若服务端样式用了更高特异性，依然可能反超 - 调试时别只看源码 HTML，要查 Elements 面板中
的实时 DOM 结构，确认动态插入的<style></style>确实排在最后
真正难处理的从来不是“谁该在前”，而是当行内样式（element.style.color）、JS 注入样式、框架 scoped 样式、外部 CSS、<style></style> 全部混在一起时，特异性、插入顺序、媒体条件、甚至 CSSOM 构建阶段的竞态，都会同时起作用。动手前，先打开 DevTools 的 Styles 面板，盯着 “origin” 和 “specificity” 列看三秒——比猜半天快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
