document.queryselector('p > div') 总是返回 null，是因为 仅允许 phrasing content（如 、、），浏览器解析时一遇 就强制闭合 并将 移为兄弟节点，真实 dom 中根本不存在 p > div 关系。
为什么 document.querySelector('p > div') 总是返回 null
不是 JS 写错了，是浏览器根本没生成你写的结构。<p></p> 的 content model 只允许 phrasing content（如 <span></span>、<strong></strong>、<img>），一遇到 <div> 就立刻强制闭合当前 <code><p></p>，再把 <div> 移到外面。真实 DOM 变成：<code><p>文字</p>
<div>内容</div>
<p></p>。所以 p > div 永远不匹配，document.querySelector('p div') 也永远是 null。
ul 列表里写了 div 却没项目符号
<ul></ul> 和 <ol></ol> 的合法直接子元素只有 <li>（以及极少数脚本类元素）。写成 <ul><div class="item">文本</div></ul> 是非法嵌套，浏览器会把 <div> 移出 <code><ul></ul>，变成同级节点，<ul></ul> 内部只剩空壳。
后果包括：
-
list-style不显示，ul li选择器完全失效 - 屏幕阅读器无法识别列表语义
- 服务端渲染与客户端 hydration 出现 DOM 不一致
正确做法：用 <li> 作为唯一合法子元素；需要结构化容器时，在 <li> 内部嵌套 <div> 完全 OK。
<h3>怎么一眼看出 p 标签被浏览器“悄悄拆过”</h3>
<p>别信源码缩进，也别只看页面渲染效果。真实 DOM 才是 JS 和 CSS 的操作依据。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>打开 Chrome DevTools → Elements 面板，重点观察：</p>
<ul><li>某个 <code><ul></ul> 或 <div> 节点缩进突兀变平、颜色偏灰，大概率已被移出父级
<li>右键该节点 → “Edit as HTML”，敲个空格再回车：如果位置瞬间跳到外面，就是原始嵌套不合法</li>
<li>在 Console 执行：<code>[...document.querySelectorAll('*')].filter(el => !el.parentElement)，列出所有“孤儿节点”——这些就是被浏览器踢出来的
最可靠的验证方式是 W3C Markup Validation Service（validator.w3.org），它会明确报出 Element div not allowed as child of element p 这类错误。
动态拼接 HTML 时怎么防 innerHTML 引发的嵌套错乱
用 innerHTML 更新内容时，传入的字符串不能以 <p></p> 开头再包 <ul></ul> 或 <div>——浏览器会当成子内容塞进去，触发非法嵌套修正。
<p>正确做法：</p>
<ul><li>目标是更新一个 <code><div class="content"></div>？那字符串就只写 <p>文字</p>
<ul><li>项</li></ul>，不带外层 <div>
<li>需要统一控制样式？给容器加 class，别依赖 <code>p ul 这种层级选择器
insertAdjacentHTML("beforeend", html) 或 DocumentFragment，避免反复清空重写最隐蔽的坑是：它不报错、不警告，但每次 querySelector 失败、CSS 不生效、读屏软件读错顺序，根源可能都在某一行被浏览器悄悄拆掉的 <p></p>
<div></div>
