纯HTML+CSS无法实现多级画廊交互功能，需用语义化标签（section→article→figure→img）构建层级结构，data-lightbox属性确保Lightbox正确分组，href提供大图地址，避免div堆砌以保障可访问性与扩展性。
如何用纯 HTML + CSS 实现多级画廊结构
原生 HTML 本身不支持“多级画廊”这种交互逻辑——它只负责结构，层级展开必须靠 CSS 类控制显隐或 JS 驱动。但你可以用语义化标签搭出清晰的嵌套骨架，为后续 JS 或 CSS 控制打基础。
关键不是“实现功能”，而是让 DOM 结构能自然映射层级关系：相册 → 分类 → 图片组 → 单图。这样 Lightbox 才能准确识别上下文。
- 用
<section>表示一个相册（一级） - 每个
<section>内用<article>表示分类（二级） - 每个
<article>内用<figure>包裹单张图，<figcaption>存描述 - 所有
<img>必须带src和data-lightbox（供 Lightbox 识别同一组）
示例片段：
<section data-album="nature">
<h2>自然风光</h2>
<article data-category="mountains">
<h3>山岳</h3>
<figure>
<a href="large1.jpg" data-lightbox="mountains"><img src="thumb1.jpg" alt="雪山"></a>
<figcaption>贡嘎主峰</figcaption>
</figure>
</article>
</section>
为什么 Lightbox 必须依赖 data-lightbox 属性
主流 Lightbox 库（如 lightbox2、fslightbox）靠这个属性值做分组。值相同，点击时就能左右切换；值不同，就各自独立弹窗。原生 HTML 没有内置分组机制，全靠这个字符串对齐。
立即学习“前端免费学习笔记（深入）”；
- 同一个分类下的所有图，
data-lightbox值必须完全一致（比如都写"mountains"） - 不要用空格、中文、斜杠等特殊字符，推荐小写英文+连字符：
"wildlife-birds" - 如果某张图想单独弹窗，就给它唯一值，比如
data-lightbox="single-123" - 若漏写或拼错，Lightbox 会当成单图模式，失去分组切换能力
避免用 <div> 堆砌画廊结构
用一堆 <div class="gallery-item"> 看似省事，但会导致两个硬伤：一是语义丢失，屏幕阅读器无法理解层级；二是 Lightbox 无法自动推断分组边界，容易把不同分类的图混进同一组。
- 浏览器解析时，
<div>是无意义容器，JS 只能靠 class 名硬匹配，极易出错 - 当你要动态加载某个分类（比如点击“鸟类”再拉取图片），
<article>天然就是可挂载事件和数据的单元 - CSS 里写
article figure { display: grid }比写.gallery-item .item更稳定，不易被全局样式污染
Lightbox 弹窗内容必须由 <a> 的 href 提供大图地址
Lightbox 不会读取 <img src>，它只认 <a href> 的链接。如果你把大图地址写在 <img> 的 src 上，弹窗打开的会是缩略图，模糊不堪。
-
<a href="large.jpg"><img src="thumb.jpg"></a>是标准写法 - 如果大图路径和缩略图路径规律固定（比如缩略图在
/thumbs/，大图在/full/），可以用 JS 自动补全，但首次加载仍需真实href - 某些 Lightbox 支持
data-alt或title提取标题，但href是唯一强制字段
结构越贴近语义，后续加 JS 或换库就越少改 DOM。别省那几行标签，多级画廊的复杂度不在视觉，而在数据归属是否清晰。
