p标签内禁止嵌套div、h2、article等块级元素，因浏览器按HTML5算法强制闭合p并移出子元素，导致DOM结构异常、CSS选择器失效、JS查询返回null；应改用section、div或纯CSS控制间距。
标签里塞块级元素，浏览器会立刻闭合它并把子元素踢到外面——你写的结构和实际 DOM 完全不是一回事，CSS 和 JS 都会失效。
为什么p里放div/h2/article后DOM就变了
标签只允许 phrasing content（短语内容），div、h2、article 属于 flow content，W3C 规范明确禁止嵌套。浏览器解析时不是“警告一下”，而是按 HTML5 tree construction 算法强制修正：
- 遇到 <p>文字</p>
<div>区块</div>
<p></p>，生成 <p>文字</p>
<div>区块</div>
<p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
- document.querySelector('p > div') 永远返回 null
- p > div 这类 CSS 选择器完全不匹配
- 多出的空 <p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 节点会影响屏幕阅读器遍历和首屏渲染计算
怎么快速确认是不是p嵌套出了问题
别看源码，直接查真实 DOM： - 打开 Chrome DevTools → Elements 面板，右键某个<p></p> → “Edit as HTML”，随便删个字符再回车：如果子元素突然“跳出去”或缩进变平，说明原始嵌套不合法
- 在控制台运行：document.querySelectorAll('p > *').forEach(el => console.log(el.tagName))，如果输出里有 DIV 或 H2，那说明你看到的是浏览器修复后的 DOM
- 查孤立节点：[...document.querySelectorAll('*')].filter(el => !el.parentElement)，被踢出来的 div 就会出现在结果里
正确的替代写法有哪些
多数时候你并不是真要“段落语义”，只是想加样式或分组： - 纯视觉分组：<div class="paragraph">
<p>文字</p>
<div>附加内容</div>
</div>
- 需要语义化结构：<section><p>导语</p>
<article>正文</article></section>
- 仅为了间距：用 CSS 控制 margin-bottom，而不是靠嵌套“撑结构”
- 模板中动态拼接时，先拼好内容再整体包进 <p></p>，别在 <p></p> 标签里开 <div>
<h3>构建阶段怎么提前拦截这类错误</h3>
靠肉眼容易漏，必须进流程：
- VS Code 安装 <code>HTMLHint 插件，启用 attr-validate 和自定义规则 no-inline-element-with-block-content
- CI 流程中加 npx html-validate --config .htmlvalidate.json src/**/*.html
- W3C Validator（validator.w3.org）粘贴片段验证，报错如 Element div not allowed as child of element p 就必须改
真正难防的不是单行代码，是模板引擎里 <p>{items.map(i => </p>
<div>{i}</div>)} 这种写法——它在编译时不报错，但服务端渲染后 DOM 已经错位，且无法通过客户端 JS 修复。
