里不能嵌套，因浏览器解析时强制闭合并将移至外部，导致dom变为内容，使css选择器、js查询失效且样式错乱。
浏览器不会报错，但会静默重写你的 DOM——所有“样式失效”“JS 找不到元素”“SSR hydration 失败”，根源往往就藏在一行看似无害的嵌套里。
为什么 p 里放 div 不报错却查不到元素
因为 p 只允许 phrasing content（如 span、em、img），div 是 flow content，一出现就触发解析器强制闭合 p。你写的 <p>文字</p>
<div>区块</div>
<p>文字</p>
<div>区块</div>。
-
document.querySelector('p div')永远返回null - CSS 选择器
p > div完全不匹配 - 事件委托绑定在
p上，但div已不在其子树中 - 服务端渲染时 HTML 字符串不含该
div的父级上下文，hydration 校验失败
如何用 W3C Validator 快速定位首个嵌套错误
DevTools 看的是修正后的 DOM，而 W3C Validator（validator.w3.org）按 HTML 规范校验内容模型，是唯一能指出 “Element div not allowed as child of element p” 这类问题的工具。
- 粘贴 HTML 片段 → 选 “Validate by Input” → 直接看到结构级错误
- 优先修复第一条
Error，后续大量Warning往往是连锁反应 - 别忽略
Element img is not closed提示：写成<img src="x">会导致整个后续层级偏移
用 JS 快速揪出被浏览器“踢出来”的孤立节点
那些被解析器挪到 DOM 树外层、失去父级关系的元素，不会报错，但永远拿不到父级样式、也无法被依赖祖先链的选择器匹配。
- 执行：
document.querySelectorAll('*').forEach(el => { if(!el.parentElement) console.log('孤立元素:', el) }) - 常见来源：
ul里直接塞div、table里漏写tbody或tr、p里放h2 - 在 DevTools Elements 面板中，它们通常显示为灰色、半透明、缩进突兀
编辑器和开发流程中该设哪些防线
靠肉眼数标签对容易漏，必须让工具在写代码阶段就拦截。
- VS Code：装
Auto Close Tag+Highlight Matching Tag，光标停在<div> 上自动高亮对应 <code>
