<p>标签不能嵌套，浏览器会自动修正为兄弟关系：<p>第一段<p>第二段</p></p>实际生成两个独立<p>节点，无父子结构，仅并列；这是HTML规范强制行为，非渲染异常。
标签不能相互嵌套，不是浏览器“不支持”，而是 HTML 解析器在构建 DOM 的第一刻就按规范强制终止——你写的 <p><p>内容</p></p>，实际生成的是两个兄弟 <p></p> 节点，中间夹着一个独立的 <p>内容</p>。
为什么第二个 <p> 会立刻闭合前一个
HTML 规范明确定义 <p> 是一个“可省略结束标签的短语级容器”，其内容模型只允许 phrasing content（如文本、<strong>、<a>、<img>）。当解析器遇到 <p> 开始标签后，一旦再看到另一个 <p>，它立刻判定：“当前段落已结束”，于是自动插入隐式闭合标签，再开启新段落。
- 这个过程发生在 DOM 构建早期，早于 CSS 解析、JS 执行、甚至早于任何样式计算
- 不触发警告、不抛异常、不写 console，只默默修正
- 你无法用
document.write或el.innerHTML = '...'绕过——动态插入同样被修正
<p><p> 嵌套的真实 DOM 表现
写：
<p>第一段<p>第二段</p></p>
浏览器实际生成：
<p>第一段</p> <p>第二段</p>
注意：没有父子关系，只有兄弟关系。中间那个 <p>第二段</p> 是独立节点，和“第一段”所在的 <p> 并列。
-
document.querySelector('p p')永远返回null -
p + p可以匹配（因为是相邻兄弟） -
document.querySelectorAll('p').length返回 2，不是 1
常见误判场景与验证方式
很多人以为“渲染看起来连在一起”就等于嵌套成功，这是最大陷阱。- 编辑器缩进或格式化插件显示嵌套 → 实际 DOM 已被拆开
- CSS 设置了
p { margin: 0 }让视觉上“粘连” → 但结构仍是两个独立段落 - 富文本编辑器导出 HTML 时自动生成嵌套
<p>→ 后端 SSR 渲染后客户端 hydration 失败（DOM mismatch）
验证是否真被拆开，最直接方法：
- 打开 Chrome DevTools → Elements 面板 → 展开目标
<p>，看子节点里有没有另一个<p>元素（如果有，说明已被浏览器修正为兄弟节点） - 控制台运行：
[...document.querySelectorAll('p')].filter(p => p.parentElement?.querySelector('p') === p)→ 若返回非空数组，说明有父<p>包裹了子<p>，这在合法 DOM 中不可能存在（即你的页面已被修正）
替代方案：什么时候真需要“段落里再分段”
绝大多数所谓“嵌套段落”需求，本质是语义混淆：- 想让几段文字视觉上更紧凑？用 CSS：
p { margin-block-end: 0.5em }，而不是套一层<p> - 想表达主副文稿关系（如引言+正文）？用
<section>或<article>作为外层容器，内部各用独立<p> - 模板中条件渲染段落？先拼好所有
<p>字符串，再整体插入，别在<p>标签内写{% if %}<p>...</p>{% endif %}
真正容易被忽略的一点：即使你完全不用 JS，仅靠纯 HTML + CSS，只要嵌套违规，W3C 验证器就会报 Element p not allowed as child of element p —— 这个错误不是“建议修复”，而是 DOM 结构已不可信的明确信号。
立即学习“前端免费学习笔记（深入）”；
