中不能嵌套，浏览器会自动闭合并移出，导致DOM结构变为标题，使p>h1选择器失效且样式不生效。

里不能放

，浏览器会直接拆开，不是“失效”，是根本没按你写的结构建 DOM。

为什么 p 里写 h1 会出问题

HTML 规范规定

只能包含“短语内容”（phrasing content），比如文字、、、，但

是块级标题元素，属于“流内容”（flow content）——它压根不被允许作为 p 的子节点。

浏览器解析到

标题

时，会在遇到

的瞬间自动闭合 p，再把 h1 放到外面，最后补一个空 p。真实 DOM 变成：

<p></p>
<h1>标题</h1>
<p></p>

所以你写的 p > h1 CSS 选择器永远不匹配，document.querySelector('p h1') 返回 null，p 上的 padding/margin 也完全不起作用。

怎么让标题出现在段落正下方（且语义正确）

别硬塞进 p，用语义和布局分离的方式处理：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 用
  或

  作为容器，里面依次放

  和

  —— 它们天然就是兄弟关系，上下堆叠
• 如果需要垂直间距控制，给 h1 加 margin-top，或给 p 加 margin-bottom，比依赖嵌套更可控
• 若必须保持视觉上“标题紧贴段落下方”，且不想改 HTML 结构，可用 Flex 布局：父容器设 display: flex; flex-direction: column;，再用 gap 控制间距

容易踩的坑：以为 display 能绕过嵌套限制

有人试过给 h1 加 display: inline 或 inline-block，指望“骗过”解析器——没用。HTML 解析发生在样式计算之前，浏览器根本不看 CSS，只按规范做语法树构建。哪怕你把它变成“看起来像行内”，h1 还是会被踢出 p。

同理，

段落

也不行：h1 同样不允许嵌套 p，结果一样是拆解。

怎么快速确认是不是这个原因

打开 Chrome DevTools → Elements 面板，别看源码，盯住实时 DOM 树：

• 如果 h1 明明写在 p 里，却和 p 并列显示（缩进相同、无父子箭头）、甚至颜色变灰，说明已被浏览器移出
• 右键 p → “Edit as HTML”，删个空格再回车，结构突然跳变，就是嵌套非法的铁证
• 在 Console 执行 document.querySelector('p h1')，返回 null 但页面上有 h1，基本可以锁定问题

真正麻烦的不是改代码，而是富文本编辑器或 CMS 输出的 HTML 经常偷偷塞这种结构，肉眼几乎看不出，得靠工具抓。