p 中不能嵌套 div，浏览器会自动修正 DOM 结构，导致 div 被移出 p 成为兄弟节点，故 querySelector('p div') 返回 null，CSS 选择器 p > div 也不生效。
为什么 p 里放 div 不报错却查不到元素
浏览器根本不会报错，但会立刻中断 p 的解析——因为 p 只允许 phrasing content（如文本、span、a、em），div 属于 flow content，非法嵌套。结果是：<p>文字</p>
<div>块内容</div>
<p>文字</p>
<div>块内容</div>
<p></p>。你写的嵌套关系彻底消失，document.querySelector('p div') 必然返回 null，CSS 中的 p > div 也完全不生效。
用 Elements 面板确认真实 DOM 是否被拆开
打开 Chrome / Edge / Firefox 开发者工具（F12），切到 Elements 标签页：
立即学习“前端免费学习笔记（深入）”；
- 别看源码，盯紧左侧实时渲染的树形结构；
- 如果某个
div原本写在p里，却显示为和p并列的兄弟节点、缩进变平、颜色偏灰，说明它已被浏览器“踢出”； - 右键该
div→ “Edit as HTML”，随便删个空格再回车：若它瞬间跳到p外面或整个结构重排，就是嵌套非法的铁证； - 禁用所有 CSS 后观察布局是否塌陷——父容器提前闭合，常表现为内容挤成一行或高度归零。
快速揪出所有被浏览器丢弃的孤立节点
执行这行代码能暴露所有因嵌套错误而失去父级的元素：
document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })
常见来源包括：
-
ul里直接塞了div或p，而非li； -
table内漏了tr，把td直接扔进table； -
form写成自闭合形式（<form></form>或<form></form>空标签），导致后续所有控件变成孤儿； -
img误写为<img alt="HTML p标签嵌套报错的排查与修复方法" >，浏览器把它当两个标签处理，第二段会干扰后续嵌套层级。
用 W3C Validator 定位首个嵌套错误源
DevTools 看的是“修正后”的 DOM，W3C Validator（validator.w3.org）才告诉你“哪一行违反了规范”。粘贴 HTML 片段 → 选 “Validate by Input”：
- 典型报错如：
Line 42, Column 8: Element “div” not allowed as child of element “p” in this context.—— 这不是建议，是规范级禁止； - 优先修复第一条
Error，后面一堆Warning往往是连锁反应； - 别跳过
Element img is not closed这类提示，它常是后续整段 DOM 错位的起点； - VS Code 用户可装
HTMLHint插件，启用attr-validate规则，编辑时就标红非法嵌套。
最隐蔽的坑在模板引擎里：JSX 中写 <p>{items.map(i => </p>
<div>{i}</div>)}
div 包裹整个列表，p 只用于段落文本。嵌套规则不是浏览器 bug，是你没告诉它怎么理解结构——它猜对了是巧合，猜错了才是常态。 
