标签内禁止嵌套、、等块级元素，浏览器会静默修正dom结构，导致css选择器失效、js查询返回null、屏幕阅读器语义错乱；根源是content model规范限制其仅允许phrasing content。
直接说结论：<p></p> 标签里不能放 <div>、<code><h2></h2>、<p></p> 自身，也不能交叉闭合；浏览器会静默拆开，你写的结构和实际 DOM 完全不是一回事。
为什么 <p></p> 里塞 <div> 会失效
<p><code><p></p> 的内容模型只允许 phrasing content（行内内容），<div> 是 flow content，规范明确禁止。浏览器解析时不是“警告一下”，而是立刻中断当前 <code><p></p>，把 <div> 提到外面，再补一个空 <code><p></p> 收尾：
<p>文字</p><div>块内容</div>
→ 实际生成的 DOM 是：
<p>文字</p> <div>块内容</div> <p></p>
- CSS 中
p > div永远匹配不到，因为根本不存在嵌套关系 - JS 执行
document.querySelector('p div')返回null - 多出两个空
<p></p>节点，影响首屏渲染计算和屏幕阅读器遍历
怎么快速确认是不是 <p></p> 嵌套出了问题
别看源码，看 Elements 面板里真实 DOM 结构：
- 右键某个
<p></p>→ “Edit as HTML”，随便删个字符再回车：如果子元素突然“跳出去”或缩进变平，说明原始嵌套不合法 - 在控制台运行：
document.querySelectorAll('p > *').forEach(el => console.log(el.tagName))，如果输出里有DIV或H2，那说明你看到的是浏览器修复后的 DOM，不是你写的 - 检查孤立节点：
[...document.querySelectorAll('*')].filter(el => !el.parentElement)，被踢出来的<div> 就会出现在结果里 <h3>替代方案：需要块级容器就别硬套 <code><p></p>多数时候你并不是真要“段落语义”，只是想加个样式或分组——那就换标签：
- 纯视觉分组：
<div class="paragraph"> <p>文字</p> <div>附加内容</div> </div> - 需要段落语义 + 块级结构：用
<section></section>或<article></article>替代外层<div> <li>仅为了换行/间距：CSS 控制 <code>margin或display: block，别靠嵌套“撑结构” - 模板中动态拼接时，避免在
<p></p>内部写if或循环块：先拼好内容，再整体包进<p></p>，而不是在<p></p>标签里开<div> <p>最隐蔽的坑是：它不报错、不警告，但每次 JS 查询失败、CSS 不生效、屏幕阅读器读错顺序，根源可能都在某一行被浏览器悄悄拆掉的 <code><p></p> <div> 上。</div>
- 纯视觉分组：
