因为是短语内容容器，只允许嵌套行内元素；浏览器解析时强制修正非法嵌套，将abc改为abc，导致dom结构改变、选择器失效、样式丢失及验证报错。
为什么 <p></p> 里不能放 <div> 或 <code><ul></ul>
浏览器解析时根本不会保留你写的结构：<p></p>
<div>abc</div>
<p></p>
<div>abc</div>，<p></p> 变成空标签。这不是样式问题，是 HTML 解析阶段的强制重排。
-
document.querySelector('p > div')永远返回null - 给
<p></p>设置的padding、margin全部失效 - CSS 选择器
p > ul完全不匹配 - W3C 验证器报错：
Element div not allowed as child of element p
真正需要包裹多段混合内容（比如标题 + 列表 + 段落），该用 <section></section>、@#@#@#@#@#@#@#@#@#@0 是合法且可交互的。但这不等于可以随意滥用。
-
<a></a>内不能再嵌套另一个<a></a>，否则外层链接行为直接失效 - 如果
<a></a>里有<input>或<form></form>，部分浏览器会禁用提交，且不符合 WCAG 要求 - 视觉上像按钮？优先用
<button type="button"></button>+ JS 跳转，比滥用<a></a>更健壮
嵌套超过三层时，该删 <div> 还是换语义标签
<p>嵌套深 ≠ 结构复杂，关键看每一层是否承担明确语义角色。当缩进超过三层，先问：这层 <code><div> 是纯为样式/JS 选中服务，还是真有内容含义？
<ul>
<li>如果只为加 <code>class 或 id 控制样式，且无语义价值，直接删掉或用更轻量的包装（比如用 <span></span> 或 CSS Grid 容器替代）
<article></article>、<aside></aside>、<section></section> 都比 <div class="card-body"> 更准确
<li>特别注意 <code><img>、<input>、<svg></svg> 这类标签——它们永远是某容器的子级，不可能出现在顶层；看到它们“孤零零”在 最容易被忽略的是：嵌套合法性 ≠ 渲染正常。很多结构浏览器能“容错渲染”，但一接入自动化测试、读屏器或 SEO 工具，语义断层立刻暴露。
