必须查看Elements面板中的真实DOM结构，而非源码缩进或渲染效果；如<p>内出现<div>等块级元素，浏览器会自动截断并转为兄弟节点，右键Edit as HTML后结构跳变即为非法嵌套铁证。
直接看 Elements 面板里的真实 DOM 结构
别信源码缩进，也别信浏览器渲染效果——<p></p>里塞了<div>，Chrome 会立刻把它踢出去，变成两个并列节点。打开开发者工具（F12），切到 Elements 面板，点开你的<code><p></p>标签：如果下面出现了<div>、<code><h2></h2>、<ul></ul>或另一个<p></p>，那说明它根本没嵌套成功，而是被浏览器自动闭合+移位了。
右键某个<p></p>节点 → “Edit as HTML”，删个空格再回车，如果子节点突然“跳”到外面一层，就是嵌套不合法的铁证。
-
document.querySelector('p div')返回null？正常。它本就不该存在 - 鼠标悬停在 Elements 中的节点上，页面对应区域会高亮，能快速验证视觉与结构是否一致
- 注意灰显的匿名
#text节点——它常是非法嵌套后残留的文本碎片
用 W3C Validator 定位具体错误行
W3C 验证器（validator.w3.org）不会猜测，它按 HTML5 规范逐字符解析。粘贴 HTML 片段或输入 URL 后，它会明确告诉你哪一行、哪个标签违规，比如：
立即学习“前端免费学习笔记（深入）”；
Line 42, Column 8: Element “div” not allowed as child of element “p” in this context.
这个提示比任何肉眼检查都准。但要注意两个前提：
- 文件开头必须有
<!DOCTYPE html>，否则可能进入怪异模式，让本该报错的地方“侥幸通过” -
<meta charset="utf-8">得放在<title>之前，否则部分字符解析异常，连带影响嵌套判断 - 复制粘贴时容易混入零宽空格、中文引号、隐藏控制符——先清空重输，再查嵌套
本地批量检查用 html-validate 而不是插件
VS Code 的 Auto Close Tag、Emmet、Prettier 都不校验嵌套逻辑。它们只补标签、调缩进，完全不管<p></p>能不能包<section></section>。真正靠谱的是 CLI 工具 html-validate：
- 安装：
npm install --global html-validate - 运行：
html-validate src/**/*.html - 关键要启用
element-permitted-content规则，它会严格对照 HTML5 内容模型检查每个父-子组合 - 自定义元素（如
<my-button>）默认不校验，需手动开启no-unknown-elements - 项目含 Vue/JSX 模板语法时，得在配置里过滤掉
{{ }}或v-if等非 HTML 结构
哪些嵌套会让 <p> 被浏览器静默截断
<p> 只接受 phrasing content，这是硬性语义限制，和 CSS 无关。哪怕你给 <div> 加了 display: inline，浏览器照样把它踢出去。
- 以下任意内容出现在
<p>开始与结束之间，都会触发自动闭合：<div>、<section>、<ul>、<h1>～<h6>、<form>、<footer>、另一个<p> - 真正能合法留在里面的只有：
<strong>、<em>、<span>、<a>、<img>、<code>、<button>（HTML5 允许） -
<br>在某些上下文中也会隐式闭合<p>，尤其当它后面跟着块级元素时 - 想实现“段落+区块”的视觉效果，正确做法是拆开：
<p>说明如下</p><div class="block-content">…</div>，再用 CSS 控制间距
<p> 下出现了不该出现的子节点，就说明浏览器已经改写了 DOM——这时候修 CSS 或 JS 查询逻辑都是徒劳，必须回到 HTML 层重构。
