<style>标签必须放在<head>里才可靠，因浏览器自上而下解析HTML，若置于<body>中会导致样式延迟应用、FOUC闪屏、媒体查询失效及层叠顺序混乱等问题。
style 标签必须放在 head 里才可靠
浏览器解析 HTML 是从上到下进行的，<style> 标签如果写在 <body> 里，部分浏览器（尤其是旧版 Safari 和某些移动端 WebView）可能无法及时应用样式，导致页面闪动或样式失效。W3C 规范也明确建议将 <style> 放在 <head> 中。
实操建议：
- 始终把
<style>块放在<head>内，紧挨在<title>后或<link rel="stylesheet">之后 - 不要为了“就近写样式”把它塞进某个
<div>里 —— 那不会生效，只是让 HTML 变得难维护 - 如果真需要局部作用域，考虑用
scoped（仅 Vue 单文件组件支持），纯 HTML 中没有原生 scoped style
内部样式不支持 @import，但可以用 @media 和 @keyframes
@import 在 <style> 块里虽语法合法，但会阻塞渲染、降低性能，且在 IE 中行为不一致；现代开发中应避免。而 @media 查询和 @keyframes 完全可用，且是响应式与动画的常用手段。
常见错误现象：把外部 CSS 文件路径写进 @import url("main.css")，结果样式加载延迟甚至失败。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
@media (max-width: 768px)直接写断点样式，无需额外请求 - 动画关键帧必须用
@keyframes定义，再通过animation属性调用，例如：@keyframes slideIn { from { opacity: 0; } to { opacity: 1; } } - 若需复用样式逻辑，优先考虑 CSS 自定义属性（
--primary-color），而非@import
style 标签里的选择器优先级和外部 CSS 一样
很多人误以为内部样式“更近”所以优先级更高，其实不是。<style> 里的规则和外部 .css 文件中的规则，在层叠（cascade）中属于同一来源（author stylesheet），最终谁生效取决于选择器特异性（specificity）、顺序和 !important，而不是“内部 or 外部”。
容易踩的坑：
- 写了
<style> .btn { color: red; } </style>，但外部 CSS 里有.container .btn { color: blue; }—— 后者特异性更高，红色不会生效 - 多个
<style>块按出现顺序叠加，后写的同选择器规则会覆盖前面的（前提是特异性相同） -
!important在内部样式里同样有效，但会破坏可维护性，慎用
内联 style 属性比 style 标签优先级更高
这是最常被忽略的层级关系：style="color: green" 这种内联样式（inline style）的特异性高于任何 <style> 或外部 CSS 中的规则，包括 !important（除非后者也带 !important）。
使用场景有限但真实存在：服务端动态注入单次样式、JS 临时高亮某元素、iframe 内容隔离等。
实操注意点：
- 不要在
<style>里写!important去对抗内联样式 —— 无效；要么改内联，要么用 JS 移除它 - 内联样式无法被 CSS 预处理器处理，也不支持伪类（如
:hover）或媒体查询 - 过度使用内联样式会让调试变得困难，Chrome DevTools 的 Styles 面板会明确标出 “element.style” 源头
<style> 块来“组织样式”，那只会让 specificity 变成一团乱麻。 
