Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

:only-child仅在父元素子节点总数严格为1且目标元素是唯一子节点时生效，如紧凑html 通知；实际项目中因换行、注释等文本节点普遍存在，应优先使用:only-of-type或js动态加class兜底。

什么时候:only-child真能用上

它只在父元素下「严格只有一个子节点」时生效，且该子节点必须是目标元素本身。比如服务端模板输出紧凑 HTML：<div><p>通知</p></div>，中间没换行、没注释、没空格——这时 p:only-child 才会命中。真实项目里这种结构极少，多见于 SSR 静态页或手写精简模板。

:only-child和:only-of-type别混着写

两者语义完全不同，写错就白加样式：

• p:only-child：父元素下总共只能有这一个节点，不能有 <span></span>、<!-- comment -->、哪怕一个换行符生成的 #text 节点
• p:only-of-type：父元素下可以有 <div>、<code><em></em>、注释、空白，只要没有第二个 <p></p> 就匹配
• 动态列表只剩一项时加圆角、去边框，该用 li:only-of-type；想锁死“整个容器只容得下一个元素”，才考虑 :only-child

为什么控制台验证比写 CSS 更重要

别靠眼睛猜结构，直接查 DOM 数量：

• 选中目标元素，在控制台运行：document.querySelector('p:only-child').parentNode.childNodes.length
• 结果不是 1，说明存在文本节点或注释，:only-child 必然不生效
• parent.children.length === 1 是更可靠的判断依据（children 只含元素节点，忽略文本/注释）
• 富文本、CMS、用户输入内容几乎必然含不可控空白，此时硬用 :only-child 等于默认失效

真要兜底，得从 DOM 层动手

CSS 伪类不是万能开关，结构不可控时优先走 DOM 判断：

• 构建时或后端渲染阶段，检查 parent.children.length === 1，然后加 class="single"
• 前端可用 MutationObserver 监听子节点增删，动态加/删 class
• React/JSX 中避免换行干扰，但手动插入空格仍会破坏 :only-child
• :has(> *:only-of-type) 可做容器级响应（Chrome 105+、Firefox 121+ 支持，Safari 不支持）

文本节点不渲染，但它在 DOM 树里真实存在，而且浏览器数得一清二楚——这才是 :only-child 失效最常被忽略的根源。