p标签只允许phrasing content（如<span><img>等），禁止嵌套<div><h2><ul>等块级元素；浏览器解析时会强制闭合<p>并将非法元素移出，导致DOM与源码不一致，querySelector('p > div')必返回null。
标签里塞
- 、
这些块级元素，浏览器根本不会等你加CSS或JS，解析阶段就直接拆开——你写的结构和实际 DOM 完全两回事，querySelector('p > div') 必定返回 null，不是代码写错了，是DOM压根没按你写的建。
怎么一眼看出p里是不是被浏览器悄悄重构了
别信源码缩进，也别靠肉眼判断。打开 Chrome DevTools → Elements 面板，右键某个 <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> 的内容模型（content model）在 HTML5 中明确定义为仅接受 phrasing content，也就是纯文本流中的语义单元：
• 允许：<span>、<strong>、<em>、<a>、<img>、<br>、<mark>
• 绝对禁止：<div>、<h2>、<p>（自身嵌套）、<ul>、<section>、<article>
注意：<button> 和 <input> 也属于交互式 phrasing content，可合法出现在 <p> 内；但 <div class="btn"> 就不行——类型决定合法性，不是类名能绕过的。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
替代方案不能只图“看起来一样”，得看语义和查询稳定性
多数人想用 <p> 包住图文卡片，其实要的不是段落语义，而是视觉分组或样式作用域。这时硬套 <p> 只会让后续维护踩坑：
• 想包图文+按钮？改用 <article> 或 <section>，把文字放进内部 <p>，其他块级元素作同级兄弟
• 纯为加 margin/padding？CSS 控制 margin-block 或 display: block 即可，不用靠嵌套“撑结构”
• 模板中动态拼接时，避免在 <p> 标签内写 v-if 或 ngIf 块——先拼好完整内容，再整体包进 <p>
• 必须保留逻辑分组但不想新增渲染节点？考虑 display: contents（Safari 15.4+ 支持），让容器不参与渲染流，只起结构组织作用
立即学习“前端免费学习笔记（深入）”；
重构后必须验证的三件事，缺一不可
改完别急着提交，这三个点不验证，等于没修：
• 运行 document.querySelector 相关逻辑，确认所有原依赖 p > .xxx 的 JS 仍能命中目标节点
• 打开 Lighthouse，检查 ARIA 属性是否因容器更换而丢失上下文（比如原 <p aria-live="polite"> 得迁移到新父容器）
• 查看 Elements 面板中 DOM 节点总数：如果替换后节点数没减甚至更多，说明只是把 div > p 换成 section > p，没解决根本问题——真正目标是减少非法嵌套带来的浏览器自动补全节点（如多出的空 <p></p>）
