anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

:only-child仅匹配父元素的唯一子节点（含文本、注释等所有节点），非仅唯一标签；dom中存在换行、空格或注释即失效，验证需用parentnode.childnodes.length === 1。

:only-child 能选中父元素下唯一的子元素，但前提是——它真的是「唯一子节点」，不是「唯一标签」。很多人写了没效果，不是选择器写错，而是 DOM 结构早被空格、换行或注释悄悄破坏了。

为什么 :only-child 经常不生效

浏览器把所有直接子节点都算进去：<p></p>、文本节点（哪怕只是回车）、<!-- comment -->、<script></script>，全算。只要 parentNode.childNodes.length !== 1，:only-child 就失效。

• 常见错误现象：div p:only-child 没反应 → 实际父 div 里有换行，生成一个 #text 节点
• Vue/React 模板编译后常插入注释节点，比如 <!--v-if-->，也会让子节点数 > 1
• display: none 的兄弟元素照样参与计算，:only-child 不看可见性
• 服务端渲染（SSR）或 CMS 输出的 HTML 很难保证“无空白”，结构越动态，越不可靠

:only-child 和 :only-of-type 到底该用哪个

语义完全不同，选错就白调样式：

• p:only-child：要求父元素下总共只有这一个子节点，且必须是 <p></p> —— 容不得任何其他节点
• p:only-of-type：只要求父元素下没有别的 <p></p>，允许存在 <div>、文本、注释等<li>真实场景中，90% 的需求其实是「同类型唯一」，比如「列表只有一项时加圆角」，该用 <code>li:only-of-type，而不是 li:only-child
• 兼容性一致（IE9+），但旧版 Safari 对空白更敏感，:only-of-type 更稳

怎么验证父元素是否真满足 :only-child 条件

别靠眼睛数标签，用控制台快速确认：

• 选中目标元素，在 DevTools 控制台执行：document.querySelector('your-selector').parentNode.childNodes.length —— 必须等于 1
• 对比 .children.length（只计元素节点）和 .childNodes.length（计所有节点），若后者更大，说明有隐藏干扰
• 临时加调试样式：* { outline: 1px solid red !important; }，看有没有框住看不见的空白区域
• HTML 压缩后（如 <div><p>x</p></div> 连写）能规避换行问题，但不适合模板类项目

安全替代方案：当结构不可控时怎么办

纯 CSS 难兜底时，就得换思路：

• 优先改用 :only-of-type，尤其在 CMS、富文本、用户生成内容场景
• 给父容器加 class 控制，比如后端或 JS 判断 children.length === 1 后加 class="single"，再写 .single > *
• 用 :has(> *:only-child) 做容器级响应（注意：Chrome 105+、Safari 15.4+ 支持，Firefox 尚未全量）
• 避免在关键布局逻辑中强依赖 :only-child，比如卡片居中、边框开关——这些地方一旦 DOM 变动，样式就断，很难 debug

最常被忽略的一点：伪类匹配的是 DOM 节点树，不是 HTML 字符串。你写的源码看着干净，运行时可能早已被框架、构建工具或 SSR 注入了看不见的节点。验证永远从 childNodes 开始，不是从 innerHTML。