纯html+css无法实现多级画廊交互功能，需用语义化标签（section→article→figure→img）构建层级结构，data-lightbox属性确保lightbox正确分组，href提供大图地址，避免div堆砌以保障可访问性与扩展性。
如何用纯 HTML + CSS 实现多级画廊结构
原生 HTML 本身不支持“多级画廊”这种交互逻辑——它只负责结构，层级展开必须靠 CSS 类控制显隐或 JS 驱动。但你可以用语义化标签搭出清晰的嵌套骨架，为后续 JS 或 CSS 控制打基础。
关键不是“实现功能”，而是让 DOM 结构能自然映射层级关系：相册 → 分类 → 图片组 → 单图。这样 Lightbox 才能准确识别上下文。
- 用
<section></section>表示一个相册（一级） - 每个
<section></section>内用@#@#@#@#@#@#@#@#@#@0是标准写法 - 如果大图路径和缩略图路径规律固定（比如缩略图在
/thumbs/，大图在/full/），可以用 JS 自动补全，但首次加载仍需真实href - 某些 Lightbox 支持
data-alt或title提取标题，但href是唯一强制字段
结构越贴近语义，后续加 JS 或换库就越少改 DOM。别省那几行标签，多级画廊的复杂度不在视觉，而在数据归属是否清晰。
<section data-album="nature"><h2>自然风光</h2>
<article data-category="mountains"><h3>山岳</h3>
<figure><a href="large1.jpg" data-lightbox="mountains">@@##@@</a>
<figcaption>贡嘎主峰</figcaption></figure></article></section>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
