使用指南 · 自定义 CSS

用自定义 CSS，
把公众号排版调成你的风格。

插件内置的 3 套主题（简约 / 经典 / 优雅）已经够用，但如果你想改标题配色、引用块样式、代码块圆角、甚至做出一套专属暗色基调，自定义 CSS 就是给你留的「后门」。本文讲清它能做什么、怎么写、以及哪些坑别踩。

它能做什么

自定义 CSS 是一层纯样式覆盖：你在设置里写一段 CSS，插件会把它自动套用到渲染好的文章 HTML 上，覆盖内置主题的部分样式。它只改「外观」，不改文章结构、不碰图片与公式。

改标题色、加底部装饰线、做出层级感
把引用块做成卡片、代码块做成圆角深色
统一正文行距、字号、字色，做出专属阅读基调
给表格、链接、图片加品牌化样式

它和「AI 编排」是两套独立系统：当一篇笔记用 AI 编排出结果时，自定义 CSS 不生效。两者不要混用——详见第 8 节「与 AI 编排的关系」。

三步上手

01打开开关：Obsidian 设置 → WeChat（微信） → 找到「自定义 CSS」区块，拨开「启用自定义 CSS」。
02写（或粘贴）CSS：在「自定义 CSS 内容」文本框里直接写，例如 p { color: #333; }；或把 CSS 存成一篇 vault 笔记（如 Meta/custom-css.md），在「或从笔记读取 CSS」填路径，插件会优先读这篇笔记。 CSS 笔记既可以只写裸 CSS，也可以像普通 Markdown 笔记一样使用 frontmatter 和一个或多个标记为 css 的 fenced code block。
03小范围测试：点「复制到公众号」把文章粘进微信编辑器看效果，满意后再正式发布或同步草稿。

微信会清洗部分复杂样式，且不同文章结构表现略有差异。正式发布前，务必先用「复制到公众号」在编辑器里核验一遍。

作用域与原理（为什么要用 !important）

插件渲染文章时，内置主题已经把样式内联到每个元素的 style 属性上（例如 <p style="color:#000">）。你的自定义 CSS 要经过juice 内联引擎合并进去——而内联样式优先级高于普通选择器，所以你想覆盖的属性必须加 !important，否则会被主题的 inline 样式压住、看起来「没生效」。

作用域由插件自动处理：你无需手写 .owc-article-root 前缀，直接写 p {...}、h2 {...} 即可，插件会把选择器自动限定到文章根容器，避免误伤页面其它部分。

/* ✅ 正确：直接写标签选择器，覆盖时加 !important */
h2 {
  color: #1a5276 !important;
  border-left: 6px solid #3498db !important;
  padding-left: 12px !important;
}

/* ❌ 错误：少了 !important，会被主题的 inline 样式覆盖掉 */
h2 { color: #1a5276; }

可用选择器清单

文章 HTML 是标准结构，下面这些选择器都能直接定位（无需前缀）。优先用标签选择器，最稳；renderer 还会输出少量 class（如代码块的 .code-lines），但版本敏感，不建议依赖。

选择器	作用对象
h1, h2, h3, h4, h5, h6	各级标题
p	正文段落
blockquote	普通引用块
.owc-callout	Obsidian Callout 外层
.owc-callout-title / .owc-callout-content	Callout 标题区 / 正文区
pre / code	代码块 / 行内代码
a	链接
table / th / td / tr	表格
img	图片
ul / ol / li	有序 / 无序列表
hr	分隔线
strong / em	加粗 / 斜体

可直接复制的示例

下面几段都来自插件仓库的 samples/custom-css-demo.css.example，复制即用。完整版可在 GitHub 查看：示例文件。

① 标题配色 + 装饰线

h1, h2, h3 {
  color: #1a5276 !important;
  font-weight: 700 !important;
}
h2 {
  border-left: 6px solid #3498db !important;
  padding-left: 12px !important;
}

② 卡片式引用块

blockquote {
  background: #f4f6f7 !important;
  border-left: 5px solid #3498db !important;
  padding: 14px 18px !important;
  border-radius: 0 8px 8px 0 !important;
  color: #566573 !important;
}
blockquote p { margin: 0 !important; }

③ 深色圆角代码块

pre {
  background: #2c3e50 !important;
  border-radius: 10px !important;
  padding: 16px !important;
  overflow-x: auto !important;
}
pre code { color: #ecf0f1 !important; background: transparent !important; }

④ 暗色正文基调

p, li {
  color: #2c3e50 !important;
  line-height: 1.85 !important;
  font-size: 16px !important;
}
strong { color: #1a5276 !important; }

⑤ 表格品牌化

table { border-collapse: collapse !important; width: 100% !important; }
th { background: #3498db !important; color: #fff !important; padding: 10px 14px !important; }
td { padding: 10px 14px !important; border: 1px solid #d5dbdb !important; }

禁忌与坑位

✅ 要做的

覆盖主题已有样式时，属性加 !important（见第 3 节）。
用具体色值（#333、rgba(0,0,0,.5)），别用 CSS 变量。
代码块加 overflow-x: auto、图片加 max-width: 100%，防止溢出。

❌ 不要做的

var(--xxx) 等 CSS 变量：内联引擎解析不了，值会丢失。
@media / @font-face：内联时会被丢弃。
url(https://...)、相对路径、file: 等外部资源：为避免预览在后台发起网络或本地文件请求，插件默认会移除这些声明。
:hover / :focus 等交互伪类：公众号不支持。
position: fixed/absolute、flex / grid / float：微信编辑器可能清洗，排版易崩，尽量避免。

伪元素支持常用子集：以简单选择器结尾的 ::before / ::after 会在发布前转成真实 <span>；计数器支持常见的单个counter-reset、counter-increment 和 counter()。编号标题、引用块大引号、Callout 装饰符可直接写，示例见第 7 节「伪元素与计数器」。

伪元素与计数器

想给标题加序号、给引用块加大引号、给 Callout 加装饰符？这些以前写 ::before/::after 会被微信剥掉，现在插件支持其中的常用子集：发布前会把匹配到的简单伪元素转成真实 <span> 并内联样式，常见的单计数器用法也会自动算好。

示例 1 · 标题自动编号（零填充）

h2 { counter-increment: h2; }
h2::before { content: counter(h2, decimal-leading-zero) " · "; color: #f60; font-weight: 700; }

效果：每篇 h2 前自动出现 01 · / 02 · …，无需手填。

示例 2 · 引用块大引号

blockquote::before { content: "\201C"; font-size: 2em; color: #bbb; line-height: 1; margin-right: 4px; }

用 content: "\201C" 写 Unicode 引号（\201C = “）。纯装饰、无文字的伪元素（如一条色条）也支持，会补一个空格占位防止被吞。

示例 3 · Callout 装饰符

.owc-callout::before { content: "※"; color: #f60; margin-right: 6px; font-weight: 700; }

注意：装饰符的样式写在伪元素自身上（如上面的 color），不需要、也不该给 ::before 加 !important。

计数器只在同一篇笔记的渲染顺序内累加；跨笔记不会延续。复杂的多计数器、嵌套计数器和 :has() 暂不支持。伪元素中的颜色、字号等常用属性会一并内联。

与 AI 编排的关系

自定义 CSS 与 AI 编排是两套独立样式系统：

普通预览 / 复制 / 同步草稿时，自定义 CSS 正常生效。
当文章走 AI 编排（预览里显示 AI 生成的结构化排版）时，自定义 CSS 不套用—— AI 结果自带完整样式，且结构随模型输出变化，用通用选择器去撬既不稳也不该做。
想改 AI 外观，请走 AI 的配色 / 风格设置，而不是自定义 CSS。
多平台发布和贴图发布也不使用这份 CSS；它只服务普通排版下的微信公众号预览、复制与草稿同步。

进阶预告

单篇 frontmatter 覆盖：在笔记 frontmatter 里指定专属 CSS。

想要哪个、或想要别的玩法？直接在 GitHub 提 Issue，需求会进入排期。

反馈与求助

我是这个插件的个人作者。自定义 CSS 是高频踩坑区，如果你发现某条样式不生效、或有想要的效果做不出，欢迎直接丢给我：

GitHub Issues（推荐）：报 Bug / 提需求
回到插件设置里的微信页，自定义 CSS 区块上方有「查看使用指南 →」可随时回到本页。