在markdown文档头部用标签写css完全有效且跨平台兼容性最好，但vscode原生预览因沙箱策略会剥离该标签而失效，需换扩展或导出html验证。
在Markdown文档头部用
完全有效，且是跨平台兼容性最好的方式之一。几乎所有支持HTML渲染的Markdown解析器（包括Typora、Zettlr、Obsidian、VSCode的第三方预览扩展、以及网页端的marked.js、remark等）都会原样保留
关键点在于：<style></style> 是标准HTML标签，不是Markdown语法，所以它不经过Markdown解析器处理，直接交给浏览器渲染引擎——只要最终输出是HTML（而非纯文本或PDF），样式就一定生效。
- 必须放在文档最开头（或至少在任何要被样式影响的Markdown内容之前），否则可能因CSS加载顺序导致部分元素未被覆盖
- 不能嵌套在其他块级元素内（比如不能包在
>引用块或列表项里），否则会被解析器截断或忽略 - 避免使用
@import引入远程字体等资源——某些离线环境（如Typora本地模式、Zettlr无网络时）会失败，优先用@font-face或系统字体栈 - 若配合GitHub/GitLab README渲染，注意它们会过滤部分CSS（如
position: fixed、!important滥用），但基础选择器（h1、p、code）基本都可用
为什么VSCode内置预览不认
它其实认——但只在「悬停提示」和「内联代码片段预览」里生效；主预览窗口（Ctrl+Shift+V）运行在沙箱WebView中，会剥离所有用户插入的<style></style>和<link>标签，这是VSCode硬编码的安全策略，不是bug，也无法绕过。
换句话说：<style></style>对VSCode原生预览「无效」，不是你写错了，而是它压根不给你执行的机会。
- 验证方法：打开VSCode开发者工具（Help → Toggle Developer Tools），切到Elements面板，搜索
<style></style>——你会发现它根本没出现在DOM里 - 替代方案只有两个：换用
markdown-preview-enhanced扩展，或改用Typora/Zettlr这类本地渲染更开放的编辑器 - 如果你坚持用VSCode又想试
<style></style>，可临时导出为HTML（右键 → “Markdown: Export to HTML”），再用浏览器打开——这时<style></style>百分百生效
用
看似简单，但实际容易踩坑：Markdown生成的HTML结构比想象中复杂，尤其当解析器自动加了包裹容器或class时。
-
h1、h2等标题标签通常没问题，但有些解析器会给<h1></h1>加id或class（比如Typora加class="md-heading"），直接写h1 { color: red; }可能被更具体的选择器覆盖，建议加!important或用h1, h1.md-heading双保险 - 代码块在不同解析器下结构差异大：
markdown-it输出<pre class="brush:php;toolbar:false;"><code class="js"></code>，而GitHub用<code><pre class="brush:php;toolbar:false;"><code></code>但靠<code>data-language</code>属性，写<code>pre code { background: #f5f5f5; }</code>更稳妥</pre> - 链接默认带下划线，但
a { text-decoration: none; }可能被编辑器主题CSS后加载而失效——把这条规则放在<style></style>末尾，或加上!important - 不要试图用
body或html选择器调背景色——多数Markdown预览只渲染文章内容区域（一个<div class="markdown-body">），应针对这个容器写样式，例如<code>.markdown-body { font-family: "Inter", sans-serif; }对比引入外部CSS与内联
两者都能用，但适用场景完全不同：内联
<style></style>适合单文档快速调试、交付给他人时“开箱即用”；<link>适合多文档复用、团队统一主题、或需要动态切换样式表的场景。-
<link rel="stylesheet" href="theme.css">路径必须是相对路径，且文件得跟Markdown在同一项目目录下；VSCode原生预览会忽略它，但Typora、Zettlr、markdown-preview-enhanced都支持 - 如果用
<link>，务必确认文件编码是UTF-8（无BOM），否则中文注释或字体名可能乱码 - 在Obsidian或Logseq中，
<link>路径需以/开头指向插件目录，不能用相对路径——此时<style></style>反而更省事 - CI/CD流程中自动生成README时，
<style></style>能确保样式随文档一起发布，而<link>容易因路径错位导致线上失效
<style></style>在Typora里完美，在GitHub上被过滤，在VSCode原生预览里直接消失，这不是你的问题，是环境边界没对齐。 -
