p内不能嵌套div等块级元素，浏览器会自动拆分为兄弟节点，导致css和js失效；应改用section、article或div等合法容器替代。
标签里塞了
、、
、这类块级元素，样式就必然错乱——不是 CSS 写错了，是浏览器压根没按你写的结构建 DOM。
为什么 p > div 这类选择器永远不生效
HTML 解析器在构建 DOM 时，根本不会让 div 出现在 p 里面。一遇到 <p>文字</p>
<div>内容</div>
，立刻拆成：<p>文字</p>
<div>内容</div>
<p></p>。所以：
-
document.querySelector('p > div') 返回 null 是正常的，因为没有这种父子关系
-
p { padding: 1em } 对那个 div 完全无效，它已不在 p 内部
- 你在源码里写的嵌套，在 Elements 面板里根本找不到——别信源码，信 DOM 树
怎么一眼确认是不是 p 嵌套惹的祸
打开浏览器开发者工具，直接看 Elements 面板中某个 p 节点的子元素列表：
- 如果里面出现了
DIV、H2、UL、ARTICLE 等块级标签，说明已被浏览器强制拆开
- 在控制台运行：
document.querySelectorAll('p div') —— 返回空数组？基本坐实问题
- 运行：
document.querySelectorAll('p + div') —— 有结果？大概率是你以为的“嵌套”其实是兄弟关系
该用什么替代 p 来包裹块级内容
别硬改 CSS（display: inline 拦不住解析阶段的结构修正），换真正合法的容器：
- 需要语义化分组：
<section></section> 或 <article></article>，它们天生支持任意块级嵌套
- 纯布局用途：
<div class="paragraph-wrapper">，无语义但自由，兼容性零压力
<li>图文组合场景：<code><figure></figure> + <figcaption></figcaption>，比套 p 更准确
- 导语+正文混合结构：把
p 单独留作导语，后面紧跟 <section></section> 或 <article></article>，用 CSS 控制间距（如 section { margin-top: 1rem; }）
模板或 SSR 中最容易被忽略的坑
服务端渲染或模板引擎拼接 HTML 时，嵌套错误更隐蔽：
- JS 模板字符串里写
`<p>${content}</p>
<div>...</div>`，一旦 content 动态含块级标签，结构当场崩塌
- Vue/React 组件中用
v-html 或 dangerouslySetInnerHTML 注入未净化的 HTML，同样触发解析修正
- CI 流程里加
tidy -errors 或 nu-html-checker，能捕获 Element div not allowed as child of element p 这类明确报错
真正难处理的不是改一行代码，而是某次提交悄悄引入了一个非法嵌套，后续所有样式微调、JS 查询失败、屏幕阅读器朗读错序，都可能源于这个被浏览器静默修正的 p。
为什么 p > div 这类选择器永远不生效
HTML 解析器在构建 DOM 时，根本不会让 div 出现在 p 里面。一遇到 <p>文字</p>
<div>内容</div>
<p>文字</p>
<div>内容</div>
<p></p>。所以：
-
document.querySelector('p > div')返回null是正常的，因为没有这种父子关系 -
p { padding: 1em }对那个div完全无效，它已不在p内部 - 你在源码里写的嵌套，在 Elements 面板里根本找不到——别信源码，信 DOM 树
怎么一眼确认是不是 p 嵌套惹的祸
打开浏览器开发者工具，直接看 Elements 面板中某个 p 节点的子元素列表：
- 如果里面出现了
DIV、H2、UL、ARTICLE等块级标签，说明已被浏览器强制拆开 - 在控制台运行：
document.querySelectorAll('p div')—— 返回空数组？基本坐实问题 - 运行：
document.querySelectorAll('p + div')—— 有结果？大概率是你以为的“嵌套”其实是兄弟关系
该用什么替代 p 来包裹块级内容
别硬改 CSS（display: inline 拦不住解析阶段的结构修正），换真正合法的容器：
- 需要语义化分组：
<section></section>或<article></article>，它们天生支持任意块级嵌套 - 纯布局用途：
<div class="paragraph-wrapper">，无语义但自由，兼容性零压力 <li>图文组合场景：<code><figure></figure>+<figcaption></figcaption>，比套p更准确 - 导语+正文混合结构：把
p单独留作导语，后面紧跟<section></section>或<article></article>，用 CSS 控制间距（如section { margin-top: 1rem; }） - JS 模板字符串里写
`<p>${content}</p> <div>...</div>`，一旦content动态含块级标签，结构当场崩塌 - Vue/React 组件中用
v-html或dangerouslySetInnerHTML注入未净化的 HTML，同样触发解析修正 - CI 流程里加
tidy -errors或nu-html-checker，能捕获Element div not allowed as child of element p这类明确报错
模板或 SSR 中最容易被忽略的坑
服务端渲染或模板引擎拼接 HTML 时，嵌套错误更隐蔽：
真正难处理的不是改一行代码，而是某次提交悄悄引入了一个非法嵌套，后续所有样式微调、JS 查询失败、屏幕阅读器朗读错序，都可能源于这个被浏览器静默修正的 p。
