p标签不能嵌套div等块级元素，浏览器解析时会自动闭合p并把div移为兄弟节点，导致p>div选择器失效、样式不生效、W3C验证报错。
标签不能嵌套块级元素，浏览器会在解析阶段强制拆解，你写的结构和实际 DOM 完全不是一回事。
为什么 p > div 选择器永远不生效
标签的内容模型被规范限定为 phrasing content（短语内容），div 属于 flow content（流内容），解析器一碰到它就立刻闭合当前 p，再把 div 插到外面。
结果是：<p>文字</p>
<div>块内容</div>
<p>文字</p> <div>块内容</div> <p></p>-
document.querySelector('p > div') 返回 null
- p 上设置的 padding、background 对 div 完全无效
- W3C 验证器明确报错：Element div not allowed as child of element p哪些子元素能合法放在 p 里
只有语义上属于“文本流一部分”的元素才被允许，和是否设了 display: inline 无关：
- 纯文本节点（含空格、换行，会被折叠）
- strong、em、small、mark、code、time
- a（里面还能嵌 img 或 span）
- img（HTML5 明确允许，但需带 alt）
- button、input（部分浏览器支持，跨平台稳定性差）
- br、sub、sup非法但高频误用的包括：
立即学习“前端免费学习笔记（深入）”；
-
div、section、ul、ol、li -
h1–h6、table、form、blockquote - 另一个
p（<p></p> <p>x</p>同样触发自动闭合）
JS 动态插入时一样会塌陷
不要以为只手写 HTML 才踩坑。以下代码同样会被浏览器修正：el.innerHTML = '<p>说明如下:</p>
<ul><li>支持 JSON</li></ul>';
执行后，ul 被移出 p，变成兄弟节点，p 内只剩 “说明如下:”。
这会导致：
- SSR hydration 失败（React/Vue 的 DOM diff 错位）
- textContent 意外截断，children 长度与预期不符
- CMS 输出或 Markdown 渲染器若未配置 noPWrapper，极易产出这类结构
怎么确认你的 p 没被悄悄改掉
别信源码缩进，也别只看渲染效果——真实 DOM 才算数：
- 在 Chrome DevTools 的 Elements 面板中右键某个 p → “Edit as HTML”，删一个字符再回车：如果子元素突然“跳出去”或缩进变平，说明原始嵌套不合法
- 运行这段脚本快速扫描：
document.querySelectorAll('p').forEach(p => {
Array.from(p.children).forEach(child => {
if(!['SPAN','STRONG','EM','A','IMG','CODE','TIME','BUTTON','MARK','SMALL'].includes(child.tagName))
console.warn('Illegal child in p:', child.tagName, 'in', p);
});
});
- 检查孤立节点：[...document.querySelectorAll('*')].filter(el => !el.parentElement)，被踢出来的 div 就会出现在结果里
真正容易被忽略的是：DOM 解析阶段的自动修正不可见、不可拦截，你看到的 Elements 面板结构，已经是“修过”的结果。验证是否合法，唯一可靠的方式是打开 DevTools，逐层点开，看它到底包住了什么。
