非法嵌套不报错但浏览器静默修正DOM，导致CSS失效、JS查询失败、SSR hydration错误；根源是违反content model规范，如<p>内嵌<div>触发强制闭合，<ul>直含<div>致其被移出，<table>漏<tbody>造成结构错位，须用W3C Validator或DevTools Elements面板验证真实DOM。

非法嵌套不会报错，但浏览器会静默重写 DOM，导致 CSS 选择器失效、document.querySelector 找不到元素、SSR hydration 失败——问题根源不是“写错了”，而是违反了 HTML 规范定义的 content model。

为什么 <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill7761" title="Article To Html">Article To Html</a> <p>文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 里放 <div> 会让样式和 JS 全面失效<p>浏览器解析到 <code><p></p> <div>...</div>

时，会在遇到 <div> 的瞬间闭合当前 <code><p></p>，再把 <div> 移到外面，最后补一个空 <code><p></p>。真实 DOM 变成：<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>...</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>。

- p > div 这类 CSS 选择器完全不匹配（<div> 已不在 <code><p></p> 内） - 原本靠 <p></p> 的 margin 或 padding 控制的垂直间距消失 - document.querySelector('p') 可能返回空段落节点，而非预期内容容器 - 富文本编辑器或 CMS 输出的 HTML 很容易带这种嵌套，且难以肉眼发现

<ul></ul> 和 <ol></ol> 只能直接包含 <li>，其他都算非法

写成 <ul><div class="item">xxx</div></ul> 是典型错误。浏览器会把 <div> 移出 <code><ul></ul>，变成兄弟节点，<ul></ul> 内部只剩空列表。

- 默认项目符号（list-style）不显示 - ul li 选择器失效，被迫改写为脆弱的 ul + div.item - 屏幕阅读器无法识别语义，影响可访问性 - 动态插入时，服务端与客户端 DOM 结构可能不一致

<table> 漏掉 <code><tbody> 不是“省事”，而是埋雷<p>虽然 <code><table><tr><td>A</td></tr></table> 能渲染，但 W3C 要求 <tr> 必须在 <code><thead>、<code><tbody> 或 <code><tfoot> 内。浏览器会自动补 <code><tbody>，但位置不可控。<ul> - <code>tr:first-child 可能命中 <tbody> 而非实际第一行数据 - <code>table.tBodies[0].rows 在 SSR 场景下可能因服务端未补而客户端补，导致 hydration 失败 - Bootstrap 等框架依赖显式 <tbody> 做样式隔离，漏写就边框/悬停异常 - 检查 Elements 面板时，<code><tr> 缩进层级突然“跳一级”，就是漏了中间层信号 <h3>验证非法嵌套不能只靠肉眼，得看真实 DOM 和规范报错</h3> <p>DevTools Elements 面板显示的结构，才是 JS 查询和 CSS 匹配所依据的真实树。W3C Validator 则能指出“Element <code>div not allowed as child of element p”这类明确违规。

- 打开 Chrome DevTools → Elements，禁用所有 CSS 后观察块级元素是否塌陷或错位 - 把 HTML 片段粘贴到 validator.w3.org，重点看 “Error” 类提示 - 模板拼接、SSR 输出、富文本生成的内容最容易藏非法嵌套，必须单独校验 - <h1></h1>～<h6></h6>、<dt></dt> 同样只接受 phrasing content，放 <p></p> 或 <div> 也会被自动截断 </div>