看清真实DOM层级应以浏览器开发者工具Elements面板为准，而非源码缩进；浏览器按规范解析标签开闭顺序自动修正错误嵌套，如会被改为。
HTML文档层级结构不是靠缩进决定的，而是由标签语义和嵌套规则共同约束的真实父子关系——浏览器解析时会自动修正错误嵌套，但人眼看到的缩进常误导判断。
怎么看清真实DOM层级，而不是源码缩进
浏览器根本不读缩进，只按规范解析标签开闭顺序。你写的缩进再整齐，<p></p>
<div></div>这种错嵌套，浏览器也会强行改成<p></p>
<div></div>，DOM树里根本不会出现你“以为”的父子关系。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远以浏览器开发者工具的
Elements面板为准，右键「检查」后直接看左侧树形结构 - 点开某个元素，看右上角显示的「
node.parentNode」或「node.children」，比数空格可靠十倍 - 遇到
<img alt="如何理解HTML文档层级结构_HTML元素嵌套逻辑解析" >、<input>这类自闭合标签，别猜它在哪层——它一定属于某个父容器，哪怕源码里没缩进对齐 - 用
document.querySelectorAll('body > *')快速列出所有直接子元素，确认主干起点
哪些嵌套是硬性禁止的，一写就出问题
不是所有块级元素都能互相包。W3C规范明确限制了某些标签的子元素类型，违反会导致DOM被重排或样式失效。
常见硬性限制：
-
<p></p>里不能放<div>、<code><section></section>、<header></header>等块级元素，只能含内联内容（<span></span>、<strong></strong>、<a></a>）或短语级元素 -
<main></main>不能作为<article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav>的子元素——语义冲突，浏览器可能忽略或警告 -
<ul></ul>和<ol></ol>的直接子元素只能是<li>；<table>下一级只能是<code><caption></caption>、<thead>、<code><tbody>、<code><tfoot> <li> <code><h1></h1>–<h6></h6>、<p></p>、<hr>这些“段落级”元素，内部不允许嵌套其他段落级元素 -
<main></main>在整个HTML文档中只能出现一次，且不能嵌套在任何其他语义区块内 -
<section></section>必须有<h2></h2>–<h6></h6>标题，否则它和<div>无区别，起不到结构化作用 <li>很多框架生成的代码会把<code><article></article>直接扔进<main></main>，这其实不违规，但前提是该<article></article>确实是整页唯一主体内容 - 在开发者工具的
Styles面板里，找目标元素上生效的复合选择器，看它依赖哪些祖先节点 - 执行
getComputedStyle(document.querySelector('.target')).display，确认它是否因父容器display: none或visibility: hidden被意外隐藏 - 用
document.querySelector('header nav ul')测试是否存在预期路径，返回null往往意味着中间某层缺失或嵌套错位 - 特别警惕
:nth-child()类伪类——它依赖兄弟节点数量和顺序，如果DOM被浏览器自动修正过，结果会和预期不符
为什么能包却不能包
关键在语义权重：<main></main>代表整个页面唯一的主要内容区，而<article></article>本身就是一个可独立分发、复用的内容单元（比如一篇博客、一条新闻）。如果<main></main>里再套<article></article>，等于说“全局主内容”只是“某篇文章”的一部分，逻辑矛盾。
但<section></section>不同——它只是主题分组，没有独立语义边界，所以<main></main>里放几个<section></section>完全合理，就像一本书的主干章节。
注意两个实际坑点：
用CSS选择器反推嵌套是否合理
CSS选择器是DOM结构的镜像。一个写死的.container > .item，说明.item必须是.container的**直接子元素**；而.sidebar ul li a这种多层空格链，则暴露了至少三层嵌套深度。
排查层级问题时可以这样用：
真正卡住人的从来不是标签怎么写，而是写完之后不知道浏览器到底怎么理解它。DOM树不撒谎，缩进会骗人，Elements面板里的节点箭头才是唯一可信坐标。
