浏览器不报错却失效，是因为dom未按所写结构构建：遇会强制闭合并移出，导致queryselector('p > div')返回null、css样式失效；富文本和ssr易因此出现hydration mismatch。
为什么
里塞
浏览器不报错却失效
不是样式没生效，是 DOM 根本没按你写的建。浏览器解析到
<p></p> <div></div> 时，会在遇到 <code><div> 的瞬间强制闭合当前 <code><p></p>，再把 <code><div> 移到外面，最后补一个空 <code><p></p>。真实结构变成：<code><p></p>
<div>...</div>
<p></p>。
<p>后果直接可复现：</p>
<ul>
<li><code>document.querySelector('p > div') 永远返回 <code>null</code></code></li>
<li>
<code>p { margin: 1em; }</code> 对 <code><div> 完全无效（它已不在 <code><p></p></code> 内）
<li>富文本编辑器导出的 HTML 经常带这种嵌套，肉眼极难发现</li>
<li>SSR 渲染与客户端 hydration 因 DOM 结构不一致而失败</li>
<h3>哪些标签真能往</h3>
<p>里放
</p>
<p><code><p></p></code> 的 content model 只允许 phrasing content（短语级内容），不是“能显示就行”。合法子元素包括：</p>
<ul>
<li>文本节点（最常见）</li>
<li>
<code><a></a></code>、<code><span></span></code>、<code><strong></strong></code>、<code><em></em></code>、<code><img></code>、<pre class="brush:php;toolbar:false;"><br>
<time></time>、<cite></cite>、<q></q> 等语义化内联标签<script></script> 和 <template></template>（极少用）以下全部非法，浏览器会静默修正：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div>、<code><section></section>、<article></article>-
<ul></ul>、<ol></ol>、<li> -
<h1></h1>～<h6></h6>、<header></header>、<footer></footer> -
<form></form>、<button></button>、<table> <h3>替代方案：想包裹多块内容别硬塞进</h3> <p> </p> <p>当你发现需要在一段文字周围加容器、布局或交互逻辑时，<code><p></p>不是正确起点。该换就换：- 纯视觉分组 → 用
<div> 或 <code><section></section>，再给内部文字套<p></p> - 要加标题+段落+列表 → 先关掉
<p></p>，在外层用<article></article>或<section></section>包裹<h2></h2>、<p></p>、<ul></ul> - 卡片式内容（如图文+描述+按钮）→ 直接用
<article class="card"></article>，内部用语义化子标签，别从<p></p>开始嵌套 - 富文本 CMS 输出含非法嵌套 → 后端清洗时用正则或 DOMPurify 过滤
<p></p>下的块级标签，或前端用innerHTML替换前先做结构校验 - VS Code 装 ESLint +
eslint-plugin-html，开启html/valid-contents规则，保存即标红<p></p> <div> <li>提交前跑 W3C Validator（https://validator.w3.org/nu/），它会明确报错：<code>Element div not allowed as child of element p - 打开 Chrome DevTools → Elements 面板，右键刷新后观察实际 DOM —— 如果看到孤立的空
<p></p>或<div> 被移到外面，就是嵌套被修正了 <li>写组件时用 React/Vue，JSX 或模板语法在编译期就报错，比运行时排查省十倍力气</li> <p>最常被忽略的一点：交叉嵌套（比如 <code><div><p>text</p></div>）和<p></p>误包块级元素，浏览器都静默处理，但两者破坏机制不同——前者改闭合顺序，后者直接移出节点。查问题时得先看 Elements 面板里的真实结构，而不是源码。
怎么一眼揪出误嵌套的
靠肉眼写完再检查效率低且易漏。真正在意结构，得靠工具链卡住：
- 纯视觉分组 → 用
