p标签仅允许嵌套phrasing content（短语内容）元素，如、、、<img>、<time>、、<span>、<button>及表单控件；<div>、<h4>等块级元素非法，浏览器会自动闭合<p>并移出子元素。
哪些行内元素能直接塞进 p 标签里
浏览器只看语义定义，不看 CSS 表现。只要 W3C 规范认定是 phrasing content（短语内容），就能合法出现在 p 中。包括：strong、em、small、mark、a、img、time、code、span、sub、sup、button，还有表单控件如 input 和 select。
常见误判点：div 即使加了 display: inline 或 inline-block，依然会被浏览器在解析阶段就踢出 p；h2、ul、section 这类块级标签，无论怎么改样式，都不允许嵌套。
p 里写 a 或 img 为什么有时样式失效
不是嵌套不合法，而是 DOM 被浏览器悄悄修正了。比如你写了：
<p>点击<a href="#"><img src="icon.png"></a>继续</p>
看起来没问题，但若富文本编辑器或 CMS 自动过滤掉 img，或某些老旧解析器不支持 img 在 a 内再嵌 a，就会导致结构断裂。更稳妥的写法是让 a 直接包裹文本，图片用背景或伪元素替代；必须用图时，确保 img 的 alt 有语义，且不依赖父 a 的尺寸做布局。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 避免在
a里再套div或p—— 这会触发浏览器提前闭合p -
img在p中默认是行内替换元素，垂直对齐用vertical-align: middle比flex更可靠 - 如果
a里需要多行文字+图标，优先用span+background-image，而非嵌套块级结构
用后代选择器控制 p 里的内联元素，为什么 p > strong 不总生效
因为 p > strong 要求 strong 必须是 p 的**直接子元素**，而实际 HTML 常有中间层：比如 <p>文字<em>强调<strong>加粗</strong></em></p>。这时 strong 的父节点是 em，不是 p，所以 p > strong 完全不匹配。
更鲁棒的写法是用空格分隔的后代选择器：p strong。它不管嵌套几层，只要在 p 内部就行。
- 想只影响正文段落里的
strong？加类名：p.article-content strong - 要排除提示框或标题里的？用属性选择器：
p:not([class*="hint"]) strong - 注意
span没有语义，纯靠类名区分；滥用会导致 CSS 选择器越来越长、难以维护
为什么验证工具说合法，但 JS 却拿不到 p 里的 div
W3C 验证器只检查语法是否符合规范，不模拟浏览器解析行为。当你写 <p>文字<div>被包住的内容</div></p>，验证器可能不报错（尤其在 HTML5 某些宽松模式下），但浏览器实际解析结果是：
<p>文字</p> <div>被包住的内容</div> <p></p>
也就是说，那个 div 已经不在任何 p 的 DOM 子树里了。JS 执行 document.querySelector('p').children 返回的 HTMLCollection 里根本不会有 HTMLDivElement。
真正可靠的验证方式只有两个：Elements 面板里看真实 DOM 结构，或者用 console.log(document.querySelector('p').innerHTML) 检查输出——如果里面还含 div，说明还没被拆，否则就是已被修正。
