document.querySelector('p > div')永远返回null，因只允许phrasing content，嵌套会触发浏览器强制闭合并移出，导致真实DOM结构与源码不一致，CSS和JS均失效。
为什么 <p></p>
<div>内容</div> 查不到 div
浏览器根本不会按这行代码建 DOM。遇到 <div> 时，解析器立刻闭合当前 <code><p></p>，再把 <div> 插到外面——实际生成的是 <pre class="brush:php;toolbar:false;"><p></p><div>内容</div><p></p>。</p>
<p>后果很直接：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li><code>document.querySelector('p > div')</pre> 永远返回 <code>null
p > div 这类 CSS 选择器完全不匹配p 设的 padding、margin 对 div 无效（它已不在 p 内）Element div not allowed as child of element p
<p></p> 里到底能放什么
<p></p> 是语义明确的“段落”，W3C 规定它只允许 phrasing content（短语内容），不是所有“看起来像文字”的东西都能塞进去。
合法内容包括：
- 纯文本、
<strong></strong>、<em></em>、<a></a>、<img alt="HTML p标签嵌套规则与浏览器解析机制" >、<time></time> -
<button></button>（HTML5 中允许，且是少数能放进p的交互元素）
非法内容包括：
<div>、<code><section></section>、<ul></ul>、<ol></ol>、<h2></h2>、<table>、<code><form></form>- 哪怕加了
display: inline或inline-block也绕不过——HTML 解析阶段就已完成修正，CSS 是后置操作 - 用
<div class="paragraph-group"> 包住多个语义单元：<code><p>正文</p> <div class="card">内容</div> - 用
<article></article>或<section></section>作为顶层容器，内部平级放置<p></p>和<div> <li>标题 + 副信息场景，改用：<code><header><h3>标题</h3> <div class="meta">副标题</div></header> - 把 HTML 粘贴进 W3C Markup Validation Service，它会指出
Element div not allowed as child of element p这类精准错误 - 打开 Chrome DevTools → Elements 面板，禁用所有 CSS 后观察节点层级——这才是 JS 查询和 CSS 匹配所依据的真实树
替代方案：怎么实现“段落+区块”布局
想让一段文字后面紧跟着一个卡片、列表或标题区块，不能靠嵌套，得靠结构重组。
推荐写法：
注意：<a></a> 是唯一被 HTML5 明确允许包裹块级元素的行内标签，但仅限于整个包裹内容逻辑上属于同一跳转目标。
验证嵌套是否合法的两个动作
别信“渲染出来就行”。真实 DOM 和你写的 HTML 经常不一致，必须主动验证：
尤其在 SSR 场景下，服务端拼出 <p></p>
<div></div>
