关于External/Internal CSS优先级及style/link标签放置的技术咨询

1. Internal CSS与External CSS的优先级问题 #

Internal CSS（<style>标签定义的内部样式）和External CSS（<link>引入的外部CSS文件）的优先级等级完全相同，谁能最终生效核心取决于它们在HTML中的加载顺序——这就是CSS层叠规则里的「后来居上」：当两个样式的选择器权重一致时，后加载的样式会覆盖先加载的同属性样式。

就像你测试的情况：如果先写<style>标签，再放置<link>引入外部文件，那外部CSS里和内部样式选择器、属性都匹配的规则，会因为加载顺序靠后而覆盖内部样式；反过来如果<link>在前，<style>在后，内部样式就会覆盖外部的同属性规则。

补充一点：如果其中一方用了!important、或者选择器更具体（比如.container p比.container权重高），那顺序就不是主导因素了，但纯内部和外部样式本身的优先级是平等的，只看加载先后。

2. <style>和<link>标签的最佳放置位置 #

从最佳实践、性能和用户体验的角度，强烈建议把这些标签放在<head>区域，原因如下：

• 避免「无样式内容闪烁（FOUC）」：要是把样式标签放在<body>里，浏览器会先渲染<body>里的内容，等加载到样式标签时才重新排版，用户会看到页面先乱成一团再突然变整齐，体验很差。
• 加快页面渲染：浏览器解析HTML时，碰到<head>里的<link>会立刻开始下载外部CSS文件，不用等到<body>解析完才加载，能让页面更快呈现出完整样式。
• 代码结构更清晰：HTML的<head>本来就是用来存放页面元信息、样式、脚本引用这类内容的，把样式放在这里能让页面结构（<body>里的内容）和样式分离，后续维护起来更方便。

当然也有特殊场景会把样式放在<body>里（比如懒加载非首屏的样式），但作为前端新手，先遵守把样式标签放在<head>的标准做法就没问题。

内容的提问来源于stack exchange，提问作者GioBass