<p>内嵌<div>会失效，因浏览器解析时强制闭合<p>并移出<div>，导致DOM结构变为<p></p><div>内容</div>，使CSS选择器p > div失效、JS查询返回null、padding/margin无效，W3C验证器明确报错“Element div not allowed as child of element p”。
浏览器不报错，但结构已悄悄变——所有看似“能渲染出来”的非法嵌套，都在破坏语义、干扰 CSS 选择器、让 JS 查询失效，甚至导致 SSR hydration 失败。
为什么 <p></p> 里放 <div> 会失效
<p>不是样式没生效，是 DOM 根本没按你写的建。浏览器解析到 <code><p></p>
<div>xxx</div> 时，会在 <div> 开始前就闭合 <code><p></p>，实际生成：<p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a>
<p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<div>xxx</div>
<p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>。
-
document.querySelector('p > div') 永远返回 null
-
p { padding: 1em; } 对 <div> 完全无效（它已不在 <code><p></p> 内）
- W3C 验证器明确报错：
Element div not allowed as child of element p
- 用
display: inline 或 inline-block 也绕不过——HTML 解析阶段就已完成修正，CSS 是后置操作
<ul></ul> 和 <ol></ol> 下只能直接放 <li>
写成 <ul><div class="item">text</div></ul> 是非法的。浏览器会把 <div> 移出列表，变成兄弟节点，<code><ul></ul> 内部只剩空壳。
-
ul li 这类选择器全部失配，必须改成 ul + div.item（脆弱且语义丢失）
- 屏幕阅读器无法识别这是列表，可访问性降级
-
<li> 内可以自由嵌套 <div>、<code><p></p>、<ul></ul>，但必须确保它们紧贴在 - 想包裹多段内容？用
<li><article>...</article></li>，别把 <div> 直接塞进 <code><ul></ul>
<h1></h1>～<h6></h6> 和 <dt></dt> 只接受行内内容
这些标签的内容模型是 phrasing content，不允许任何块级元素。写 <h2><div>title</div></h2>，浏览器实际解析为：<h2></h2>
<div>title</div>。
-
<h2></h2> 变成空标签，所有绑定在其上的样式（如 margin-bottom）失效
-
el.innerHTML = '<h4><div>x</div></h4>' 动态插入同样触发自动修正
- 需要标题带结构？用
<h3 class="title">主标题</h3>
<div class="meta">副标题</div>，或语义更准的 <header></header> 包裹
-
<dt></dt> 同样禁止 <p></p>、<ul></ul>；但 <dd></dd> 可以合法嵌套块级元素
<table> 必须显式包含 <code><tbody><p>哪怕 <code><table><tr><td>A</td></tr></table> 能显示，浏览器也会静默补 <tbody>，但补的位置不可控，导致 DOM 不一致。
<ul><li>
<code>tr:first-child 可能选中的是 <tbody>，而非预期的 <code><tr>
<li>
<code>table.tBodies[0].rows 在 SSR 和客户端可能指向不同层级
- Bootstrap Table 等框架依赖显式
<tbody> 做样式隔离，漏写则边框/悬停失效
<li><code><tr> 只能作为 <code><table>、<code><thead>、<code><tbody>、<code><tfoot> 的直接子元素——放在 <code><div> 里等于被丢弃
<p>真正难的不是记住哪些不能嵌，而是看懂 DevTools Elements 面板里那个“被修正后的 DOM”——它才是你代码实际运行的结构，而不是你写的源码。</p>
</div>
document.querySelector('p > div') 永远返回 null
p { padding: 1em; } 对 <div> 完全无效（它已不在 <code><p></p> 内）
Element div not allowed as child of element p
display: inline 或 inline-block 也绕不过——HTML 解析阶段就已完成修正，CSS 是后置操作
<ul></ul> 和 <ol></ol> 下只能直接放 <li>
写成 <ul><div class="item">text</div></ul> 是非法的。浏览器会把 <div> 移出列表，变成兄弟节点，<code><ul></ul> 内部只剩空壳。
-
ul li这类选择器全部失配，必须改成ul + div.item（脆弱且语义丢失） - 屏幕阅读器无法识别这是列表，可访问性降级
-
<li>内可以自由嵌套<div>、<code><p></p>、<ul></ul>，但必须确保它们紧贴在前——中间加空行或注释，某些解析器会误判为已结束 - 想包裹多段内容？用
<li><article>...</article></li>，别把<div> 直接塞进 <code><ul></ul><h1></h1>～<h6></h6>和<dt></dt>只接受行内内容这些标签的内容模型是 phrasing content，不允许任何块级元素。写
<h2><div>title</div></h2>，浏览器实际解析为：<h2></h2> <div>title</div>。-
<h2></h2>变成空标签，所有绑定在其上的样式（如margin-bottom）失效 -
el.innerHTML = '<h4><div>x</div></h4>'动态插入同样触发自动修正 - 需要标题带结构？用
<h3 class="title">主标题</h3> <div class="meta">副标题</div>，或语义更准的<header></header>包裹 -
<dt></dt>同样禁止<p></p>、<ul></ul>；但<dd></dd>可以合法嵌套块级元素
<table> 必须显式包含 <code><tbody><p>哪怕 <code><table><tr><td>A</td></tr></table>能显示，浏览器也会静默补<tbody>，但补的位置不可控，导致 DOM 不一致。 <ul><li> <code>tr:first-child可能选中的是<tbody>，而非预期的 <code><tr> <li> <code>table.tBodies[0].rows在 SSR 和客户端可能指向不同层级 -
- Bootstrap Table 等框架依赖显式
<tbody> 做样式隔离，漏写则边框/悬停失效 <li><code><tr> 只能作为 <code><table>、<code><thead>、<code><tbody>、<code><tfoot> 的直接子元素——放在 <code><div> 里等于被丢弃 <p>真正难的不是记住哪些不能嵌，而是看懂 DevTools Elements 面板里那个“被修正后的 DOM”——它才是你代码实际运行的结构，而不是你写的源码。</p> </div>
