<p> 里不能放 <div>，因为 <p> 是文本级容器，只允许嵌套行内元素；浏览器会自动提前闭合 </p> 并将 <div> 移至外部，导致 DOM 结构与预期不符。
为什么 <p> 里不能放 <div>
浏览器会自动修正这种嵌套，导致 DOM 结构和你写的不一致，JS 用 document.querySelector('p > div') 根本选不到——因为根本没生成这个节点。<p> 是文本级容器，只允许嵌套行内元素（比如 <span>、<strong>、<a>），块级元素（<div>、<h1>、<p> 自身）一塞进去，解析器就当场“拆家”：把 </p> 提前闭合，再把 <div> 放到外面。实际效果相当于你写了：<p>文字</p><div>内容</div><p></p>。
<div> 嵌套的自由度高，但不等于随便套
<div> 确实能包几乎所有标签，但要注意语义和渲染副作用：
- 连续多个
<div>套娃（比如<div><div><div>…</div></div></div>）会让 CSS 选择器变脆弱，.container .item可能意外匹配到深层嵌套里的某个<div class="item"> - 把
<button>或<input>直接塞进<a>里，会触发 HTML5 的“可交互内容禁止嵌套”校验，部分浏览器禁用点击或报错 -
<ul>只能直接子元素是<li>，中间插个<div>就破坏列表语义，屏幕阅读器可能跳过或误读
用 CSS 选择器定位嵌套子元素时，空格和 > 的区别很关键
写 .parent .child 和 .parent > .child 看似差不多，但匹配逻辑差很多：
-
.parent .child：匹配所有在.parent内部任意深度的.child（包括孙子、曾孙） -
.parent > .child：只匹配.parent的**直接子元素**，哪怕中间隔了个<span>都不算 - 如果结构是
<div class="parent"><section><div class="child"></div></section></div>，.parent > .child就完全失效
JavaScript 操作嵌套结构时，别依赖 innerHTML 的“所见即所得”
你用 el.innerHTML = '<p>text<div>inner</div></p>'，执行完再读 el.innerHTML，得到的很可能不是原字符串——浏览器已经按规范重排过了。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
document.createElement()+appendChild()逐层构建，控制每个节点的父子关系 - 需要动态插入带嵌套的 HTML 片段时，先用
DOMParser解析成文档片段，再检查结构合法性 - 调试时直接看浏览器开发者工具的 Elements 面板，而不是靠
console.log(el.innerHTML)判断嵌套是否成功
嵌套不是语法糖，是浏览器解析器强制执行的树形约束；写错的地方，它不会报错，只会默默改写你的 HTML——这才是最危险的。
