最稳妥的做法是直接用 .markdown-preview 作为根选择器；因vscode内置预览和mpe均将内容包裹于此，但结构差异大，需显式限定作用域，避免样式失效或被覆盖。
直接用 .markdown-preview 作为根选择器最稳妥
VSCode 内置预览和 markdown-preview-enhanced（MPE）都把渲染内容包裹在 .markdown-preview 容器内，但结构差异大。不加前缀直接写 h1 { color: red; } 很可能失效——因为预览页的 HTML 是沙箱 WebView，顶层元素不是 body，而是带 class 的 div。
必须显式限定作用域，否则样式会被忽略或被内置规则覆盖。尤其注意 MPE 默认会给标题加 class="section-header"，而内置预览用的是 .markdown-preview h1。
-
.markdown-preview h1：适用于 VSCode 原生预览（Ctrl+Shift+V），兼容性好 -
#preview h1.section-header：专用于 MPE，避免被其默认 class 冲突 - 别写
body h1或html h1—— 这些节点根本不在预览 DOM 树里
code 和 pre > code 必须分开写
行内代码（如 `console.log()`）和代码块（如三个反引号围住的 JS 片段）在渲染后是完全不同的 DOM 节点：code 是行内元素，pre > code 是块级嵌套结构。它们的 class、父容器、默认 padding 都不同。
MPE 还会为代码块自动添加语言 class，比如 pre code.language-js，所以只写 code { background: #eee; } 对代码块无效。
- 行内代码：用
.markdown-preview code - 代码块背景/边框：用
.markdown-preview pre > code或.markdown-preview pre code - 想按语言定制？加
.markdown-preview pre code.language-py { color: #008000; }
数学公式（KaTeX）需要单独处理 .katex 类
如果你用了 $$...$$ 或 \[...\] 写公式，VSCode（尤其是 MPE）会通过 KaTeX 渲染，生成一堆带 .katex、.katex-mathml 等 class 的 span 和 svg。这些元素不受通用 code 或 p 规则影响。
默认 KaTeX 字体小、行高紧，和正文明显脱节。不单独覆盖，公式会“缩在一行里”看不清。
- 统一字号：加
.katex { font-size: 1.2em !important; } - 修复行高：加
.katex-html { line-height: 1.5 !important; } - 慎用
!important，但 KaTeX 内联样式优先级高，不用它基本无效
图片、表格、列表等常见元素的可选选择器
这些元素不像标题或代码那么“稳定”，不同解析器输出的 class 差异更大。建议优先用结构选择器，而不是依赖 class 名。
- 图片居中+加边框：
.markdown-preview img { display: block; margin: 1rem auto; max-width: 100%; border: 1px solid #ddd; } - 表格基础美化：
.markdown-preview table { border-collapse: collapse; width: 100%; }+.markdown-preview th, .markdown-preview td { border: 1px solid #ccc; padding: 0.5rem; } - 无序列表缩进太浅？改
.markdown-preview ul { padding-left: 1.5rem; }，别碰li的 margin
所有样式生效的前提是 CSS 文件路径正确、编码为 UTF-8（无 BOM）、且预览页已手动刷新（Ctrl+R）。MPE 不支持热更新，改完 CSS 后不刷新就看不到效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
