p标签只允许phrasing content（如等），禁止嵌套等块级元素；浏览器解析时会强制闭合并将非法元素移出，导致dom与源码不一致，queryselector('p > div')必返回null。
标签里塞
- 、
这些块级元素，浏览器根本不会等你加CSS或JS，解析阶段就直接拆开——你写的结构和实际 DOM 完全两回事，querySelector('p > div') 必定返回 null，不是代码写错了，是DOM压根没按你写的建。
怎么一眼看出p里是不是被浏览器悄悄重构了
别信源码缩进，也别靠肉眼判断。打开 Chrome DevTools → Elements 面板，右键某个 <p></p> 节点 → “Edit as HTML”，删一个字符再回车：如果子节点突然“跳出来”、层级变平，说明原始嵌套非法，浏览器已经介入修正。
更准的方法是跑这行检查：document.querySelectorAll('p > *').forEach(el => { if (!['SPAN', 'STRONG', 'EM', 'A', 'IMG', 'BR', 'MARK'].includes(el.tagName)) console.log('非法子元素:', el, '父p:', el.parentElement) })
只要输出里有 DIV、H2、UL，就是已被重构的铁证。
p标签只允许哪些内容？不是“能显示就行”
<p></p> 的内容模型（content model）在 HTML5 中明确定义为仅接受 phrasing content，也就是纯文本流中的语义单元：
• 允许：<span></span>、<strong></strong>、<em></em>、<a></a>、<img>、<br>、<mark></mark>
• 绝对禁止：<div>、<code><h2></h2>、<p></p>（自身嵌套）、<ul></ul>、<section></section>、<article></article>
注意：<button></button> 和 <input> 也属于交互式 phrasing content，可合法出现在 <p></p> 内；但 <div class="btn"> 就不行——类型决定合法性，不是类名能绕过的。
<h3>替代方案不能只图“看起来一样”，得看语义和查询稳定性</h3>
<p>多数人想用 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8217" title="小红书长文-谷歌浏览器"><img
src="https://img.php.cn/upload/skill/000/000/081/179189830235139.jpg" alt="小红书长文-谷歌浏览器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8217" title="小红书长文-谷歌浏览器" class="overflowclass">小红书长文-谷歌浏览器</a>
<p class="overflowclass">在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8217" title="小红书长文-谷歌浏览器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 包住图文卡片，其实要的不是段落语义，而是视觉分组或样式作用域。这时硬套 <p></p> 只会让后续维护踩坑：
• 想包图文+按钮？改用 <article></article> 或 <section></section>，把文字放进内部 <p></p>，其他块级元素作同级兄弟
• 纯为加 margin/padding？CSS 控制 margin-block 或 display: block 即可，不用靠嵌套“撑结构”
• 模板中动态拼接时，避免在 <p></p> 标签内写 v-if 或 ngIf 块——先拼好完整内容，再整体包进 <p></p>
• 必须保留逻辑分组但不想新增渲染节点？考虑 display: contents（Safari 15.4+ 支持），让容器不参与渲染流，只起结构组织作用
重构后必须验证的三件事，缺一不可
改完别急着提交，这三个点不验证，等于没修：
• 运行 document.querySelector 相关逻辑，确认所有原依赖 p > .xxx 的 JS 仍能命中目标节点
• 打开 Lighthouse，检查 ARIA 属性是否因容器更换而丢失上下文（比如原 <p aria-live="polite"></p> 得迁移到新父容器）
• 查看 Elements 面板中 DOM 节点总数：如果替换后节点数没减甚至更多，说明只是把 div > p 换成 section > p，没解决根本问题——真正目标是减少非法嵌套带来的浏览器自动补全节点（如多出的空 <p></p>）
