应通过chrome devtools elements面板查看真实dom结构，而非源码；灰色半透明标签、孤立节点及w3c validator报错“element div not allowed as child of element p”可精准定位非法嵌套。
怎么看p标签实际嵌套结构，而不是源码写的那样
浏览器不会报错，但会静默拆开非法嵌套。你写的 <p></p>
<div>内容</div>
<div> 是 <code><p></p> 的子节点——它会被显示为独立的灰色兄弟节点，紧挨着一个空 <p></p>。右键那个 <p></p> → “Edit as HTML”，删个空格再回车，如果 <div> 突然“跳”到外面、缩进变平，就坐实了嵌套不合法。
<h3>为什么<code>document.querySelector('p div')总返回null
这不是 JS 写错了，是 DOM 根本不存在这个结构。浏览器解析时已把 <div> 踢出 <code><p></p>，所以查询永远失败。同理：
-
document.querySelectorAll('p > *')如果输出DIV或H2，说明你看到的是修正后的 DOM，不是源码 -
[...document.querySelectorAll('*')].filter(el => !el.parentElement)会列出所有被踢出来的“孤儿节点”，比如意外出现在 body 顶层的<div> <li> <code>getComputedStyle(document.querySelector('p')).display返回block没用——样式生效不代表结构合法 Line 42, Column 8: Element “div” not allowed as child of element “p” in this context.- 优先修第一条 Error：后面一堆 Warning 往往是连锁反应，修完第一个，可能全消失
- 别忽略
Element img is not closed这类提示——<img>是非法写法，会导致后续所有嵌套偏移 - 原
<p></p>上挂的aria-live、tabindex或事件监听器，是否迁移到新容器上 - 屏幕阅读器顺序是否因移除
<p></p>而跳过关键文本（比如导语没了语义包裹） - Lighthouse 的 “Heading levels” 和 “List item role” 是否报警——
<ul></ul>里塞<div> 会直接让列表语义失效 <p>最麻烦的从来不是改标签，而是某次 SSR 渲染中，模板引擎把动态生成的 <code><p></p>和<article></article>拼在一起，DOM 结构在服务端和客户端不一致——这种问题只会在生产环境悄悄发生。
W3C Validator 怎么准确定位第一处错误
DevTools 只给你结果，W3C 验证器（validator.w3.org）才告诉你“为什么”。粘贴 HTML 片段后，它会明确标出：
重构时最容易忽略的语义迁移点
把 <p></p>
<div>...</div>
<div>
<p>...</p>
<div>...</div>
</div> 不算完成。真正要检查的是：
