无嵌套限制但应避免过度嵌套，超3层通常表明结构或CSS设计不合理；优先用语义化标签替代纯布局，确保每层有明确职责，并采用BEM等规范提升可维护性。
html 常见误用场景：<div> 标签本身没有嵌套限制，但嵌套不合理会直接破坏语义、影响可访问性和 css 维护性。
<h3>什么时候该用 <code><div>，什么时候不该用
<p>不是所有容器都该用 <code><div>。它是个纯布局占位符，不带任何语义。比如导航栏写成 <code><div class="nav">...</div>，屏幕阅读器完全读不出这是导航；换成 <nav></nav> 就能被识别。
<div> 包裹按钮、链接、表单控件，却不加 <code>role 或语义标签
<div>，其实 <code><article></article> 或 <section></section> 更合适
<div>，CSS 可以直接作用在语义标签上
<h3><code><div> 嵌套过深的典型错误现象
<p>开发者常遇到：CSS 选择器越来越长（如 <code>.wrapper .container .main .content .item），改一个样式要翻三屏；或者 JS 用 document.querySelector 找元素时总返回 null，其实是路径里某层 <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>
<ul><li>超过 3 层嵌套的 <code><div>，大概率说明结构没想清，或 CSS 没抽离好
<li>如果某层 <code><div> 既没 class、也没 id、还没内联样式，那它大概率是冗余的
<li>服务端渲染或 SSR 场景下，深层嵌套会增加 HTML 字节数，首屏解析时间微升（不明显但可测）</li>
<h3>替代 <code><div> 嵌套的轻量方案
<p>不用删代码，先看能不能“升维”——把 <code><div> 换成有语义的标签，往往自然就减少了一层：
<ul>
<li>把 <code><div class="header"><div class="logo">...</div></div> 改成 <header><h1>...</h1></header>
<div><div><div>文字</div></div></div>，用 <ul><li>文字</li></ul>
<main></main> 或 <section></section> 加 display: flex，不额外套 <div>
<p>真要嵌套时，确保每层都有明确职责：外层管布局流（<code>flex / grid），中层管逻辑分组（class="card"），内层管内容呈现（class="card__body"）。
CSS 与 JS 如何配合控制嵌套层级
过度依赖 DOM 层级写 CSS 是嵌套失控的根源。比如写 div div div p 这种选择器，一改结构就全崩。
- CSS 推荐用 BEM：
card__title比.card div h2更稳 - JS 查找元素优先用语义属性：
document.querySelector('nav [aria-current="page"]')比document.querySelectorAll('div div ul li a')[2]可靠得多 - Vue/React 等框架里，
<div> 嵌套常是模板逻辑没拆好，该抽组件的地方硬塞 <code>v-if块嵌套本身不危险，危险的是没人记得住哪层
<div> 干什么——尤其当多人协作、项目迭代半年后。</div>
