p标签内不能嵌套div，因HTML解析器会自动闭合p标签，实际DOM变为<p></p><div>内容</div>，导致document.querySelector('p > div')返回null、CSS选择器失效、样式丢失。
为什么直接写 p div 选不到东西
因为 HTML 解析器根本不允许 p 里面出现 div。你写的 <p>文字<div>内容</div></p>，浏览器在解析时会立刻自动闭合 p 标签，实际生成的 DOM 是：<p>文字</p><div>内容</div>。所以 document.querySelector('p div') 永远返回 null，p > div 这类 CSS 选择器也完全不生效。
这不是样式没加载、不是浏览器兼容问题，是 HTML 结构被强制修正了。想验证，打开开发者工具看 Elements 面板——你写的嵌套结构根本不会出现在那里。
p 里合法能放什么元素
p 只接受 phrasing content（短语级内容），包括：
-
strong、em、span -
a、img、code、time -
button（是合法的，别被误导）
禁止放入任何 flow content：比如 div、section、ul、h2、table、另一个 p，甚至 br 在某些上下文中也会触发隐式闭合。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
如果你真需要“段落里有区块”，正确做法是拆开：<p>说明如下：</p><div class="block-content">列表项</div>，然后用 CSS 控制间距和视觉连贯性。
怎么安全地给 p 及其内联子元素加样式
样式能生效的前提是结构合法。确认嵌套合规后，常用定位方式有：
- 直接选
p：比如p { margin-bottom: 1.5rem; line-height: 1.6; } - 选内联子元素：
p strong { color: #d32f2f; font-weight: 700; } - 用 class 精准控制：
<p class="intro"><em>注意</em>此处为强调</p>→.intro em { font-style: normal; background: #fff8e1; } - 避免用
margin-top：首段顶部空白常因外边距合并（margin collapse）导致，只设margin-bottom更可控
如果父容器是 div 且需要防止外边距塌陷，给它加 overflow: hidden 或 display: flow-root。
调试时最容易忽略的一点
很多人花时间调 CSS，却没意识到问题出在 HTML 结构本身——浏览器已经悄悄改写了你的 DOM。打开 DevTools 的 Elements 面板，逐层展开看真实结构，比对着源码猜要快得多。一旦发现 p 被提前闭合，就说明嵌套违规，必须重构 HTML，而不是强行用 JS 或 CSS 补救。
