必须在框架输出HTML前拦截或重构非法嵌套（如<p><div></div></p>），因其会导致SSR hydration失败、JS查询异常和无障碍访问问题，CSS补救无效。
框架输出内容（如 CMS、富文本编辑器、Markdown 渲染器、SSR 模板）中出现 <p><div>...</div></p> 这类嵌套，不是你写错了，而是框架默认行为或用户输入失控导致的；浏览器会静默修正 DOM，但 SSR hydration、JS 查询、无障碍访问全会出问题——必须在输出前拦截或重构，不能靠 CSS 补救。
为什么框架输出的 p 嵌套比手写更危险
手写 HTML 出错还能肉眼排查，框架输出是批量生成的，错误会规模化扩散：
- 富文本编辑器（如 Quill、Tiptap）默认把整块卡片当“段落”插入，生成
<p><div class="card">...</div></p> - Markdown 解析器（如 marked、remark）把代码块、表格、自定义容器误判为“段落内内容”，包裹进
<p> - SSR 框架（如 Next.js、Nuxt）服务端渲染时若未清理非法嵌套，客户端 hydration 会因 DOM 结构不一致直接报
Hydration failed because the server rendered HTML didn't match - CMS 后台允许用户粘贴 Word 或网页内容，
<p>标签常被自动套在标题、图片、按钮外层，形成<p><h3>标题</h3></p>等结构
在框架层拦截：用正则或 AST 清洗输出 HTML
别等它进浏览器——在 HTML 输出前做一次语义清洗。不同框架有不同介入点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- Next.js App Router：在
generateStaticParams或fetch后、传给组件前，用html-dom-parser或parse5解析并重写节点 - Nuxt / Vue SSR：用
useHead或serverMiddleware中间件对响应体做替换，注意避开 script/style 内容 - Express/Koa 后端：加一层中间件，对
res.send()前的 HTML 字符串运行清洗函数 - 纯前端富文本：监听
editor.getHTML()后，用正则快速剥离非法包裹：html.replace(/<p>(<(?!\/?p|\/?div|\/?h[1-6]|\/?ul|\/?ol|\/?section)[^>]*>[^<]*<\/[^>]*>)/gi, '$1')（仅作应急，不推荐长期依赖）
安全兜底：用 display: contents 替代视觉嵌套
有些场景你确实需要“看起来像段落里包着卡片”，又无法改框架逻辑。这时别硬塞 <div> 进 <p>，改用 CSS 层级控制：
立即学习“前端免费学习笔记（深入）”；
- 把外层
<p>换成<div class="paragraph">，再用display: contents让它不参与渲染流，只保留语义分组作用 -
display: contents在 Safari 15.4+、Chrome 65+、Firefox 63+ 支持良好，不影响子元素样式继承 - 示例：
<div class="paragraph" style="display: contents"><p>正文文字</p><div class="card">卡片内容</div></div>—— DOM 结构合法，CSS 可写.paragraph .card，JS 也能稳定查询 - 注意：如果子元素用了
position: absolute，display: contents会让其相对于最近定位祖先，而非这个 div，需额外确认上下文
验证是否真修复了：别信源码，信 runtime DOM
改完别只看 HTML 源文件或编辑器缩进——框架可能还在输出旧结构。每次发布前必须跑这三步：
- 打开 Chrome DevTools → Elements 面板，展开任意疑似节点，看真实子元素是否含
DIV、H2、SECTION—— 如果有，说明清洗没生效或被后续 JS 覆盖 - 在控制台执行：
[...document.querySelectorAll('p')].some(p => [...p.children].some(c => ['DIV', 'H2', 'UL', 'SECTION'].includes(c.tagName)))，返回true就还有漏网之鱼 - 用 Lighthouse 跑一次可访问性审计，重点看 “Heading levels should only increase by one” 和 “List items should be direct children of a list element” 是否因 p 被拆开而误报
dangerouslySetInnerHTML 插入框架输出的 HTML，一旦某次更新带入非法嵌套，hydration 就会静默失败，且不会抛错——得靠自动化检查卡在构建阶段。 
