必须用<ol>和<li>构建合法嵌套树，子<ol>须为父<li>的直接子元素，严格闭合、禁用<div>堆叠，配合counter-reset、padding-inline-start及<blockquote cite>确保语义、可访问性与RTL兼容。
用 <ol> 和 <li> 构建合法嵌套树，不是 <div> 堆叠
盖楼本质是有序的层级回复，HTML 原生就支持这种结构：<ol> 表示评论时间/逻辑顺序，<li> 包裹单条评论（含作者、内容、操作区），子回复必须作为下一层 <ol> 的直接子元素嵌套在父 <li> 内。
常见错误是把回复塞进上层 <li> 末尾却不闭合内层 <ol>，导致 DOM 层级断裂、屏幕阅读器读序错乱。正确写法必须严格配对：
<ol class="comments">
<li class="comment">
<p>主评论</p>
<ol class="replies">
<li class="comment reply">
<p>一级回复</p>
<ol class="replies">
<li class="comment reply"><p>二级回复</p></li>
</ol>
</li>
</ol>
</li>
</ol>
-
<ol class="replies">必须是父<li>的**直接子元素**，不能提出来或用绝对定位脱离文档流 - 禁用
<ul>替代<ol>——即使不显示数字，语义上评论天然有时序和归属关系 - 每层
<ol>都要设counter-reset，否则 CSS 计数器会继承上层值，编号错乱
缩进必须用 padding-inline-start，别碰 margin-left
靠 margin-left 推动嵌套，会在 RTL（从右向左）语言下完全反向，打印样式错位，高对比度模式下也易失效。真正稳定的做法是用逻辑属性 + 显式层级标记。
- 给每层容器加
data-level="2"、data-level="3"等属性，CSS 写[data-level="2"] { padding-inline-start: 1.5rem; border-inline-start: 2px solid #e0e0e0; } - 避免用百分比或
em做缩进增量——嵌套越深，缩进越夸张，3 层后视觉就失控 - 加细竖线前缀比纯空白更易识别层级，但颜色必须浅（如
#e0e0e0），否则干扰正文阅读 - 不要用
transform: translateX()缩进——脱离文档流，键盘焦点顺序错乱，iOS Safari 键盘弹出时可能遮挡输入框
<blockquote cite> 才是语义正确的“引用谁”，不是视觉缩进
用户点开一条回复，需要立刻知道它针对哪条评论。这个“归属关系”不能靠缩进猜，得靠 HTML 显式声明。
立即学习“前端免费学习笔记（深入）”；
- 子回复块外层必须用
<blockquote cite="#comment-456">，其中cite值必须是页面内有效锚点（如#comment-456）或完整 URL；空字符串、"#"或占位符会触发 Lighthouse 警告 -
<blockquote>内不应再套<section>——语义过载，辅助技术会误判为“新评论单元”，而非“对某条的引用” - 被引用的原始评论必须有唯一
id="comment-456"，这是所有 JS 插入、锚点跳转、ARIA 关联的基础 - 别在
<blockquote>里放<h3>或<p>标记作者/时间——用<footer>或<small>更符合标题流和语义
超过 3 层嵌套必须折叠，<details> 只能用于“展开原文”，不能包整条回复
浏览器和辅助技术对深度嵌套的解析能力有限，超过 3 层后语义开始模糊，键盘导航、打印样式、屏幕阅读器都容易出问题。
-
<details>的语义是“可展开的补充信息”，不是“回复容器”。正确用法是：<blockquote cite="#comment-456"><details><summary>查看原文</summary><p>……</p></details></blockquote> - 禁止把整个子评论（含作者、时间、内容）包进
<details>——这会让屏幕阅读器读成“可折叠的评论”，而非“对某条的引用” -
<summary>必须是<details>的**第一个且唯一子元素**；里面塞<button>或其他标签会破坏原生 toggle 行为 - Safari 16.4+ 才稳定支持
summary::marker，老版本需 fallback 到background-image+padding-inline-start
真正难的不是怎么写多层 HTML，而是每一层都要同时满足：DOM 结构合法、语义无歧义、CSS 缩进适配 RTL、JS 可精准锚定、辅助技术可线性导航——漏掉任意一环，盖楼就变成“塌楼”。
