div嵌套过深会破坏可维护性、CSS作用域和JS查找稳定性；深层选择器依赖DOM路径易断裂，margin折叠导致间距异常，flex/grid仅作用于直接子元素，冗余div应删或改用语义标签。
div 标签本身没有语法嵌套限制，浏览器不会报错，但随意嵌套会直接破坏结构可维护性、CSS 作用域和 JS 查找稳定性——问题不在“能不能”，而在“该不该”。
为什么 div 嵌套过深时 CSS 选择器总失效
深层嵌套（比如 div > div > div > p）让 CSS 依赖 DOM 路径，一旦某层被删或类名拼错，整个样式链就断。更隐蔽的问题是：外层 div 的 margin 和内层第一个子 div 的 margin-top 会折叠，导致视觉间距消失或翻倍。
- 优先用 BEM 类名（如
card__header）替代路径选择器，避免写.wrapper .container .content p - 需要控制内部间距时，把
padding加在父容器上，而非靠子元素margin - 若必须保留外层
margin隔离，给父div加display: flow-root阻止折叠（Chrome 64+/Firefox 58+ 支持）
div 套 div 后 flex/grid 布局不生效的真正原因
Flex 或 Grid 只作用于**直接子元素**。div 设了 display: flex，但中间多套一层 div，那层就成了 flex item，你真正想排布的内容反而成了“item 的孙子”，完全不受控制。
- 错误写法：
<div class="flex"><div><div class="target">内容</div></div></div>→.target不参与 flex - 修复方式：删掉冗余包裹层；或把
display: flex移到更内层容器（如.target的父级div） - 调试时看 DevTools “Computed” 面板里
display值——如果显示block，说明被某条规则重置了
什么时候该用语义标签代替 div 嵌套
不是所有容器都该用 div。它没语义，纯为样式/交互服务；而 section、nav、article 等自带含义，能被屏幕阅读器识别、被搜索引擎理解、被开发者一眼读懂结构。
立即学习“前端免费学习笔记（深入）”；
- 导航栏别写
<div class="nav">，改用<nav> - 标题+段落组合别套三层
div，直接用<section><h2>...</h2><p>...</p></section> -
<main>不能包在div或section里——W3C 明确禁止，否则其“唯一主内容”语义失效 - 看到
class="section"就该警觉：类名带 “section” 不代表它该是<section>，判断依据永远是“这段内容有没有独立主题？”
最常被忽略的点：每加一层 div，都要问一句——它有没有明确职责？有没有 class/id/样式？有没有被 JS 或 CSS 实际用到？如果没有，它大概率是冗余的，删掉比留着更安全。
