p元素禁止嵌套div、ul等块级元素，浏览器会自动闭合p标签导致dom结构异常，引发css失效、js查询失败和屏幕阅读器跳过内容等问题。
为什么 p 里不能放 div、ul 或其他块级元素
浏览器解析时会直接“切开”p——遇到非法子元素（如div、ul、h2）就立刻闭合当前p，再把非法内容放到p外面。结果是源码写的是<p></p>
<div>xxx</div>
<p></p>
<div>xxx</div>。CSS 选择器失效、JS querySelector('p > div') 查不到、屏幕阅读器跳过中间内容，全由此引发。
识别真实嵌套结构是否被浏览器悄悄修正
别信编辑器缩进或源码写法，用 Chrome DevTools 的 Elements 面板右键节点 → “Edit as HTML”，临时删掉一个
document.querySelectorAll('p').forEach(p => { if ([...p.children].some(c => c.nodeType === 1 && !['span', 'strong', 'em', 'a', 'img'].includes(c.tagName.toLowerCase()))) console.log('p contains illegal child:', p) })能快速揪出问题p节点。
合法替代方案：根据语义选对容器
不是所有“想包一段文字+其他内容”的场景都该用p：
- 需要包裹图文卡片？换用
article或section，再把文本放进p，其他元素作为同级兄弟 - 要实现标题+描述+操作按钮？用
header+main+footer分组，而非塞进一个p - 只是想加粗/高亮某段文字？用
span或mark，它们属于 phrasing content，可安全嵌入p - 必须保留原有视觉层级但又不能破坏语义？考虑
display: contents（注意 Safari 15.4+ 支持），让父容器不参与渲染流，只起逻辑分组作用
重构后必须验证的三个硬指标
改完别急着提交，打开 Lighthouse 跑一次，重点盯：
-
aria-label或role是否因移除p而丢失上下文（比如原p里有aria-live，就得迁移到新容器上） - DOM 节点总数是否下降——如果替换后节点数没变甚至更多，说明只是把
div套p改成section套p，没解决根本问题 - CSS 选择器是否从
p .btn被迫升级为article .btn或加了额外类名——这往往是语义分组不到位的信号
最常被忽略的一点：重构不是为了“让代码看起来更语义”，而是为了让document.querySelector能稳定命中、让screen reader读出正确顺序、让print media不丢内容——这些才是嵌套结构是否健康的直接反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
