<style>标签必须置于<head>内才生效，否则选择器可能不匹配、媒体查询失效；多<style>按书写顺序层叠；内联样式不适合大型项目，应拆分为可缓存的CSS文件。
style 标签写在 head 里才生效
HTML 中的 <style> 标签必须放在 <head> 内，浏览器才会把它当作全局样式规则解析。如果误塞进 <body>（哪怕在最开头），部分浏览器会允许渲染，但 CSS 选择器可能不匹配、媒体查询失效、或被后续同名规则意外覆盖——这不是兼容性问题，是规范要求。
常见错误现象：body { margin: 0; } 写在 <body> 里却没清掉默认边距；或者自定义类名在元素上始终不生效。
- 所有样式规则（包括
:root、@media、@keyframes）都依赖<head>上下文 - 动态插入
<style>时，也得用document.head.appendChild()，不能 append 到body - 若用构建工具（如 Vite、Webpack），CSS 文件最终仍会注入到
<head>，本质没变
多个 style 标签可以共存，但顺序决定优先级
页面里出现多个 <style>，它们按 HTML 中的书写顺序从上到下加载和解析。后写的规则会覆盖前面相同选择器的声明，跟 CSS 层叠逻辑一致。
使用场景：第三方 SDK 注入自己的 <style>，你又想微调它的按钮颜色；或者 A/B 测试时动态切换样式块。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 不要指望靠位置“隐藏”旧规则——删掉或加
!important更直接 -
<link rel="stylesheet">的加载时机晚于内联<style>，所以外部 CSS 默认能覆盖内联样式（除非内联用了!important） - 避免在
<head>底部堆砌一堆零散<style>，维护成本高，建议合并或抽成 CSS 文件
全局样式不等于无限制选择器
写了 <style> 并不自动让所有元素都套上你的规则。所谓“全局”，仅指作用域覆盖整个文档，但具体是否生效，还得看选择器是否匹配、是否有更高优先级的规则、是否被 scoped 或 Shadow DOM 隔离。
容易踩的坑：* { box-sizing: border-box; } 看似安全，但某些 UI 库（如 Ant Design）内部组件已设好 box-sizing，强行重置可能导致布局错位；body { font-size: 14px; } 会影响 rem 基准，而你可能忘了重设 html 的字体大小。
- 推荐用
:where()或:is()降低特异性，比如:where(h1, h2, h3) { margin-top: 0; } - 慎用通配符
*，尤其涉及inherit、unset时，容易穿透到 SVG、表单控件等意外节点 - 如果项目用 Vue/React，组件内
<style scoped>或 CSS-in-JS 会绕过全局<style>，这点常被忽略
内联 style 标签不适合大型项目
纯 HTML 页面用 <style> 没问题，但一旦样式超过 20 行，就该考虑拆分。它无法被浏览器缓存、不能复用、没法做 PostCSS 处理（如自动加前缀）、也不支持 @use / @import 等现代语法。
性能影响：每次 HTML 变更都要重新下载整页，而 CSS 文件可长期缓存；gzip 对重复类名压缩效果远好于内联样式文本。
- 开发阶段可用
<style>快速验证，上线前务必移出 - 如果必须内联（如邮件模板、微前端子应用隔离），请确保只含关键 CSS，且用工具压缩（如
clean-css） - 注意 CSP 策略：有些安全策略会禁止内联
<style>，需配置style-src 'unsafe-inline'或用 nonce
真正麻烦的不是放哪，而是放了之后有没有人记得它还在那儿——几个月后新加的组件样式冲突，翻遍 CSS 文件都没找着源头，最后发现是 <head> 里某段被遗忘的 <style>。
