<p>内不能嵌套<h4>，因<h4>属流内容而非短语内容，浏览器解析时会立即闭合<p>，导致DOM结构变为<p></p><h4>标题</h4>正文，使p的样式、选择器及textContent全部失效。
为什么 p 里写 h4 会被浏览器“吃掉”
因为 HTML 解析器在遇到 h4 时，会立刻关闭当前打开的 p，再开始解析 h4。这不是渲染问题，也不是 CSS 能绕过的——它发生在 DOM 构建最开始阶段。
你写的：<p><h4>标题</h4>正文</p>
浏览器实际生成的 DOM 是：<p></p><h4>标题</h4>正文<p></p>（注意末尾那个孤立的 </p> 还可能引发进一步修正）
结果就是：document.querySelector('p').textContent 是空字符串；p > h4 选择器永远不匹配；给 p 设的 padding 或 background 全部失效。
立即学习“前端免费学习笔记（深入）”；
h4 本身就不属于“短语内容”
p 的合法子节点只有一类：HTML 规范定义的 phrasing content，包括 span、strong、em、a、img、纯文本等。而 h4 属于 flow content，和 div、ul、section 同级，语义上是独立的内容区块，不是“段落中的一部分”。
即使你用 CSS 把 h4 改成 display: inline，也完全没用——解析器根本不看样式，只按规范判断元素类型。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
同理，h1–h6、dt、figcaption 都受同样限制，它们都不能作为 p 的子元素。
常见误用场景与替代写法
很多人想让标题和正文视觉上“连在一起”，于是硬塞进 p，比如：
- 用
<p><h4>说明</h4>这是补充文字</p>—— 错，h4被踢出，p变空 - 用
<p><span class="title">说明</span>这是补充文字</p>—— 对，span是合法 phrasing content - 用
<section><h4>说明</h4><p>这是补充文字</p></section>—— 更推荐，结构清晰、语义正确 - 想居中或加粗标题文字？直接给
h4加样式，别用p包裹来“借力”
验证是否真的合法，别信肉眼效果
浏览器渲染看起来“一样”，不代表结构对。真正判断方式只有两个：
– 打开开发者工具 → Elements 面板 → 看原始 DOM 树是否和你写的 HTML 一致（尤其注意有没有意外出现的空 p）
– 用 W3C Markup Validator 或本地跑 html-validate，报错信息会明确指出：Element h4 not allowed as child of element p
最容易被忽略的是：JS 动态插入时同样触发自动闭合，el.innerHTML = '<p><h4>x</h4></p>' 和手写 HTML 一样被修正——这点在富文本编辑或 SSR 场景下极易翻车。
