浏览器解析<p><div>内容</div></p>时会自动闭合<p>并将<div>移至其外，导致DOM结构变为平级而非嵌套；Elements面板显示的才是真实结构，document.querySelector('p > div')返回null即为铁证。
直接看 DevTools 里的真实 DOM 结构
别信源码怎么写的，浏览器解析 <p><div>内容</div></p> 时会立刻闭合 <p>，然后把 <div> 移到外面。你写的是嵌套，它建的是平级。最准的验证方式就是打开 Chrome 或 Edge 的开发者工具，切到 Elements 面板，展开节点看实际层级——那里显示的才是 JS 查询、CSS 匹配、屏幕阅读器读取所依据的真实结构。
右键任意节点 → Show accessibility properties 还能顺便确认可访问性树是否同步；如果 <p> 下面空空如也，但旁边多出一个孤立的 <div>，基本就是被自动拆开了。
document.querySelector('p > div') 返回 null 就是铁证
这不是 JS 写错了，是 DOM 根本不存在这个路径。只要你在控制台执行这行代码返回 null，就说明浏览器没按你写的结构建树。常见错误场景包括：
-
<p><div class="tip">提示</div></p>→ 实际变成<p></p><div class="tip">提示</div><p></p> -
<p>见下文<ul><li>第一项</li></ul></p>→<p></p><ul><li>第一项</li></ul> - JS 动态赋值
el.innerHTML = '<p><div>x</div></p>'同样触发修正
W3C 验证器报错比 CSS 调试更早暴露问题
在 validator.w3.org 粘贴 HTML，它会明确指出：Element div not allowed as child of element p。这类错误不是警告，是规范级禁止——意味着所有浏览器都必须按规则“修复”，且修复逻辑一致（先闭合 <p>，再放 <div>）。比起花时间调样式或猜 JS 为什么查不到元素，先跑一遍验证器能省掉 80% 的排查时间。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
注意：富文本编辑器导出的 HTML 经常批量生成非法 <p> 嵌套，尤其带 <table> 或 <section> 的片段，务必单独校验。
想让区块紧跟段落？用相邻兄弟结构，别硬塞
真正需要“一段文字 + 一个区块容器”的排版，合法解法是放弃嵌套，改用视觉对齐的兄弟关系：
<p>这是说明文字。</p> <div class="block-wrapper"> <h3>标题</h3> <p>区块内段落</p> </div>
这样既符合规范，又避免了 DOM 断裂。如果必须语义分组，外层套 <section> 或 <article>，而不是反过来让 <p> 当容器——<p> 的设计定位就是“一段话”，不是“一块区域”。
最易被忽略的一点：哪怕你用 display: inline 把 <div> 视觉上压扁，也绕不过 HTML 解析阶段的结构修正。缩进再整齐、CSS 再像，DOM 已经被重排了。
