超过3层嵌套的HTML结构主因是语义不清或CSS未抽离，会导致querySelector失败、屏幕阅读器跳过、低端机强制同步布局；可用Chrome DevTools查看node.depth，超6需重构，或运行脚本筛选深度≥6的节点。
超过3层嵌套的HTML结构，90%以上不是“写法习惯问题”，而是语义没理清或CSS没抽离——浏览器不拦你，但document.querySelector容易返回null、屏幕阅读器跳过整块内容、低端机上offsetHeight读取可能触发强制同步布局。
怎么快速定位过深嵌套节点
别靠肉眼数缩进。打开 Chrome DevTools 的 Elements 面板，右键任意节点 → “Show DOM properties”，直接看 node.depth 值。超过 6 就该重构——这不是经验值，是低端安卓机实测 FCP 延迟拐点。
- 更高效的方式是在控制台运行：
Array.from(document.querySelectorAll('*')).filter(el => el.parentElement && el.parentElement.depth >= 6) - 重点关注 SSR 框架输出的
data-reactroot外层包裹、组件库默认开启的wrapper层、table单元格里再套div的老写法 -
node.depth统计的是从document开始的父级链长度，不含document自身
用语义标签替代 div 嵌套的实操边界
不是删 div，是换标签。同一视觉效果，结构层级能砍掉 2–3 层，但必须守住 W3C 语义边界。
-
<main></main>不能嵌套在<section></section>或<div> 中——这是非法嵌套，会破坏文档大纲，不是性能问题，是合规问题 <li> <code><header></header>放在<main></main>内时，表示文章头部；放在最外层才表示页面头部，作用范围不同 -
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>里不能放<section></section>或<header></header>，它只接受文本级内容 - 三列布局老写法：
<div class="row"> <div class="col">A</div> <div class="col">B</div> </div>→ 新写法：<main style="display: grid; grid-template-columns: 1fr 1fr 1fr;">...</main> -
display: contents能让父节点不参与盒模型，但 IE 不支持，且会剥离可访问性树中的节点，慎用于关键导航容器 - 浮动清除不用
<div style="clear:both">，改用 <code>::after { content: ""; display: table; clear: both; } - 表单控件不用三层
div包<input>，<label class="input-group"></label>加 CSS 就够 - 卡片类组件常见冗余：
<div class="card-inner"><div class="card-body"><div class="card-content"> → 用 <code>grid或flex直接压到 1 层真正难的不是“怎么扁平”，而是判断哪一层该留、哪一层该升维。一个没
<h2></h2>的<section></section>只是普通分组，不是语义区块；一个空class也没id更没样式的<div>，删掉不影响渲染——但它往往藏在框架生成代码或团队协作的“安全套娃”惯性里。</div>
CSS 替代 DOM 层级的关键动作
视觉结构交给 CSS，不是靠多层标签“撑出来”。现代布局能力足够覆盖绝大多数场景，但要注意兼容性和副作用。
立即学习“前端免费学习笔记（深入）”；
