... 会失效，因为浏览器解析时强制闭合 并将 移至外部，真实 dom 变为 ...，导致 p > div 选择器失配、样式丢失、js 查询返回 null，且 w3c 验证器明确报错。
为什么 <p></p>
<div>...</div> 会失效
浏览器根本不会按你写的结构解析——遇到 <div> 就立刻闭合 <code><p></p>，再把 <div> 移到外面。真实 DOM 变成 <code><p></p>
<div>...</div>，导致以下问题：
-
document.querySelector('p > div')返回null - CSS 中
p > div选择器完全不匹配 -
<p></p>上设的padding、margin看不见效果（它已成空标签） - W3C 验证器明确报错：
Element div not allowed as child of element p
这不是渲染 bug，是 HTML 解析阶段的强制修正，CSS 和 JS 都得按这个“被改过”的 DOM 工作。
@#@#@#@#@#@#@#@#@#@0 是合法的，浏览器不会拆解
<a></a> 内不能再嵌另一个 <a></a>，否则外层链接失效<a></a> 包含 <input> 或 <button></button>，部分浏览器会禁用表单提交行为<div> 内容都属于同一跳转目标，否则对屏幕阅读器和 SEO 不友好
<p>别为了“方便”把 <code><a></a> 当万能容器用；真要包裹复杂结构，优先考虑 <div role="link" tabindex="0"> + JS 处理。
<h3>
<code>display: inline 能绕过嵌套限制吗？
不能。这是最常被误解的一点：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- HTML 解析发生在 CSS 计算之前，
<p></p> <div style="display: inline"></div>依然会被浏览器自动修正为<p></p> <div style="display: inline"></div> -
display属性只影响渲染盒模型，不改变 HTML content model 规则 - DevTools Elements 面板里看到的结构，才是 JS 查询和 CSS 匹配所依据的真实树 —— 别信源码缩进
想让视觉上“像行内”，又需要结构上合法，正确做法是换容器：用 <span></span> 替代 <div>，或用 <code><header></header>/<section></section> 包裹后再控制样式。
JS 动态插入时怎么防嵌套翻车？
动态拼接 HTML 字符串最容易踩坑，尤其 CMS 输出、富文本编辑器内容或模板字符串中：
-
el.innerHTML = '<h3><div class="meta">副标题</div></h3>'→ 浏览器照样拆成<h3></h3> <div class="meta">副标题</div> - 避免直接拼接不可信的 HTML 片段；优先用
document.createElement()+appendChild()构建结构 - 若必须用字符串，先过一遍 DOMParser 或用工具函数做基础校验（比如检测
<p></p>内是否含<div>） <li>服务端渲染（SSR）场景下，DOM 结构不一致会导致 hydration 失败，这类错误在客户端几乎无提示</li> <p>真正难排查的不是写错，而是“看着正常却查不到元素”——根源往往藏在动态生成的 HTML 里，而不是手写的那几行。</p> </div>
