浏览器不报错却失效，是因为DOM未按所写结构构建：<p>遇<div>会强制闭合<p>并移出<div>，导致querySelector('p > div')返回null、CSS样式失效；富文本和SSR易因此出现hydration mismatch。
为什么
里塞
浏览器不报错却失效
富文本编辑器导出的 HTML 经常带这种嵌套，肉眼极难发现
SSR 渲染与客户端 hydration 因 DOM 结构不一致而失败
不是样式没生效，是 DOM 根本没按你写的建。浏览器解析到
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div></div> 时，会在遇到 <code><div> 的瞬间强制闭合当前 <code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>，再把 <code><div> 移到外面，最后补一个空 <code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>。真实结构变成：<code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div>...</div><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>。</p>
<p>后果直接可复现：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a>
<p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li><code>document.querySelector('p > div') 永远返回 null
p { margin: 1em; } 对 <div> 完全无效（它已不在 <code><p></p> 内）
哪些标签真能往
里放
<p></p> 的 content model 只允许 phrasing content（短语级内容），不是“能显示就行”。合法子元素包括：
- 文本节点（最常见）
-
<a></a>、<span></span>、<strong></strong>、<em></em>、<img alt="HTML制作时怎么防止误操作嵌套p标签" >、<br>
-
<time></time>、<cite></cite>、<q></q>等语义化内联标签 -
<script></script>和<template></template>（极少用）
以下全部非法，浏览器会静默修正：
<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 面板里的真实结构，而不是源码。
怎么一眼揪出误嵌套的
靠肉眼写完再检查效率低且易漏。真正在意结构，得靠工具链卡住：
- 纯视觉分组 → 用
