多层嵌套是硬伤而非美观问题：直接导致css失效、js查询断裂、屏幕阅读器跳过、lighthouse标红dom depth>6；识别冗余层需验证是否承载语义、绑定样式、监听事件或被js引用，四者皆无即可删除。
多层嵌套 <div> 不是“写得不够优雅”的小问题，而是直接导致 CSS 选择器失效、JS 查询断裂、屏幕阅读器跳过内容、Lighthouse 报告 DOM depth > 6 标红的硬伤——删不掉的嵌套，90% 是因为没搞清哪一层真有职责。
<h3>怎么一眼识别该删的 <code><div> 层
<p>别数嵌套几层，看它有没有实际“干活”：是否承载语义（如被 <code><main></main> 包裹）、绑定样式类（class 或 id）、监听事件（onclick、addEventListener）、被 JS 引用（ref、querySelector 目标）。只要这四条全不满足，就是纯冗余节点。
- DevTools 里右键该
<div> → “Break on > attribute modifications”，点它；没触发任何断点，基本可删 <li>删前搜整个项目：<code>document.querySelector(".wrapper .content")这类带多级 class 的查询，确认是否真依赖这层 - 检查是否仅用于撑高、居中、清浮动——这些现在都该由父元素自身用
display: flex或gap解决 -
<main></main>必须且只能出现一次，且不能嵌套在<section></section>或<div> 内，否则浏览器警告、辅助技术忽略内层内容 <li> <code><section></section>不是“为了留白加的容器”，它必须表达一个逻辑主题（如“用户评价”），否则用<div> 更诚实 <li> <code><nav></nav>里面直接写<ul></ul>，别再套<div class="nav-list">；<code><ul></ul>本就是块级容器，支持display: flex - 表格表头别堆
<thead><tr><th><div>标题</div></th></tr></thead>，压缩为单行<tr> <th>标题</th>，复杂层级用 <code>data-level或aria-label组件返回多节点时的 Fragment 使用陷阱
Vue/React 中组件返回多个兄弟节点，若用
<div> 包裹，构建产物就多一层无意义 DOM；但 <code>>（Fragment）不是万能解药。- Fragment 不参与盒模型，所以没法加
class、style或事件监听——如果那层<div> 真承担了样式隔离或点击区域扩展，就不能简单替换成 Fragment <li>SSR 场景下，Fragment 在服务端渲染后不生成真实节点，但某些老版 polyfill 或自定义渲染器可能不兼容</li> <li>更安全的做法：先确认该包裹层是否真被 CSS/JS 依赖；若只是过渡性布局容器，删掉 + 把样式提到子元素上</li> <h3>现代 CSS 布局如何绕过 wrapper div</h3> <p>过去靠 wrapper 清浮动、撑高度、做栅格，现在这些能力已下沉到父容器自身，强行保留 wrapper 反而暴露结构失焦。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>导航栏直接用 <code><nav style="display: flex; gap: 1rem;"></nav>，别再套<div class="nav-container"> <li>三列卡片布局，不用 <code><div class="row"><div class="col">A</div></div>，改用<main style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"></main> - 慎用
display: contents：它虽让父容器不参与盒模型，但 IE 不支持，且会剥离无障碍树中的节点，实际项目中不如直接删掉那层
最常被忽略的点是：语义化重构不是“换标签比赛”，而是每次删掉一层
<div> 前，必须验证它没被 JS 查询、没被 CSS 选择器隐式依赖、没被屏幕阅读器当作导航锚点——否则删得越狠，崩得越突然。</div> - Fragment 不参与盒模型，所以没法加
用语义标签替代时的常见误操作
不是把 <div class="header"> 换成 <code><header></header> 就完事，关键在结构对齐和约束条件。
