p 中不能嵌套 div，浏览器会自动修正 DOM 结构，导致 div 被移出 p 成为兄弟节点，故 querySelector('p div') 返回 null，CSS 选择器 p > div 也不生效。

为什么 p 里放 div 不报错却查不到元素

浏览器根本不会报错，但会立刻中断 p 的解析——因为 p 只允许 phrasing content（如文本、span、a、em），div 属于 flow content，非法嵌套。结果是：

文字

块内容

被重写为

文字

块内容

。你写的嵌套关系彻底消失，document.querySelector('p div') 必然返回 null，CSS 中的 p > div 也完全不生效。

用 Elements 面板确认真实 DOM 是否被拆开

打开 Chrome / Edge / Firefox 开发者工具（F12），切到 Elements 标签页：

• 别看源码，盯紧左侧实时渲染的树形结构；
• 如果某个 div 原本写在 p 里，却显示为和 p 并列的兄弟节点、缩进变平、颜色偏灰，说明它已被浏览器“踢出”；
• 右键该 div → “Edit as HTML”，随便删个空格再回车：若它瞬间跳到 p 外面或整个结构重排，就是嵌套非法的铁证；
• 禁用所有 CSS 后观察布局是否塌陷——父容器提前闭合，常表现为内容挤成一行或高度归零。

快速揪出所有被浏览器丢弃的孤立节点

执行这行代码能暴露所有因嵌套错误而失去父级的元素：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })

常见来源包括：

• ul 里直接塞了 div 或 p，而非 li；
• table 内漏了 tr，把 td 直接扔进 table；
• form 写成自闭合形式（
  或
  空标签），导致后续所有控件变成孤儿；
• img 误写为 ，浏览器把它当两个标签处理，第二段会干扰后续嵌套层级。

用 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 中写

{items.map(i =>

{i}

)}

看似无害，实则违法；应改为用 div 包裹整个列表，p 只用于段落文本。嵌套规则不是浏览器 bug，是你没告诉它怎么理解结构——它猜对了是巧合，猜错了才是常态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！