直接修改display属性无法改变html元素的非法嵌套结构，因为浏览器在构建dom树时已按规范强制修正，css仅作用于修正后的dom。
为什么直接改display没用
很多人试过给div加style="display: inline"，以为这样就能塞进<p></p>里。不行。HTML 解析器在构建 DOM 树时就按规范强制修正结构，CSS 是之后才介入的。你看到的“视觉上正常”，只是样式覆盖了错乱后的表现，但document.querySelector('p > div')依然返回null，p的padding和margin也压根没作用在预期位置。
遇到p里要放标题或列表怎么办
典型场景：一段说明文字后紧跟一个h3小标题，或者带图标的一段描述后跟一个ul要点列表。这些都不能硬塞进<p></p>。
- 把
p闭合，用<div class="text-block">或<code><section></section>包裹整块内容，再在里面依次放p、h3、ul - 若语义上确实是“一段完整说明”，可用
<details>/<summary></summary></details>模拟折叠结构，summary内允许行内容，details体内容无嵌套限制 - 避免用
<span></span>强行替代p——它没有段落语义，对可访问性和 SEO 不友好 - 正确做法：用
li作为唯一合法子元素，需要结构化内容时，在li内部嵌套div、h4、p都 OK - 如果每个
li都需要统一容器（比如加边框/阴影），给li设display: block或直接用li > div写样式 - 别用
ul > div这种选择器——它永远匹配不到东西，因为div根本不在ul里面 - 打开 DevTools → Elements 面板，逐层展开，看
p下面有没有你写的div；如果没有，而是出现在p同级甚至更外层，说明已被重排 - 用 W3C Markup Validation Service 粘贴 HTML 检查，报错如
Element div not allowed as child of element p就是明确信号 - 服务端渲染（SSR）项目尤其要注意：Node 环境下解析的 DOM 和浏览器 hydrate 时的 DOM 必须一致，否则 React/Vue 会抛
Hydration failed
ul里写了div却没项目符号
写成<ul><div class="item">内容</div></ul>，浏览器会把div移出ul，变成兄弟节点，ul内部只剩空壳。结果就是list-style消失、ul li选择器完全失配。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
怎么快速验证嵌套是否被浏览器改写
别信源码缩进，也别只看页面渲染效果。真实 DOM 才是 JS 和 CSS 的操作依据。
最常被忽略的是：即使你用 JS 动态设置innerHTML = '<p></p>
<div>x</div>
