data属性不能绑定轮播状态，它仅作静态标识；真正驱动轮播的是id配合:target伪类或radio的:checked状态，data属性仅用于语义标注和js增强辅助。
data属性怎么绑定轮播状态？
HTML 的 data- 属性本身不触发行为，它只是静态存储。想靠纯 HTML 实现轮播控制，必须配合 CSS 的 :target 伪类或 :checked（配合隐藏 radio）来驱动状态切换。单纯写 data-slide="2" 不会让页面自动跳到第 2 页——那是 JS 才干的事。
-
data-属性适合存标识符，比如data-slide-id="3"、data-slide-index="0"，但读取和响应得靠 CSS 或 JS - 真正“无 JS”的轮播，核心是把轮播项做成可定位的锚点（
id），再用a链接指向它们，靠:target显示对应项 - 或者用隐藏的
input[type="radio"]+label模拟按钮，用:checked控制兄弟元素显隐
用 :target 实现最简轮播的 HTML 结构
关键不是 data 属性，而是让每个轮播项有唯一 id，且能被 URL 片段定位：
<div class="carousel"> <a href="#slide-1" class="carousel-nav">1</a> <a href="#slide-2" class="carousel-nav">2</a> <a href="#slide-3" class="carousel-nav">3</a> <p></p> <div id="slide-1" class="carousel-item">第一张图</div> <div id="slide-2" class="carousel-item">第二张图</div> <div id="slide-3" class="carousel-item">第三张图</div> </div>
然后用 CSS 控制显隐：
默认全部隐藏：.carousel-item { display: none; }
只显示当前 target 项：.carousel-item:target { display: block; }
可加 transition 实现淡入，但注意 :target 切换是瞬时的，过渡需搭配 opacity 和 visibility
为什么不能直接用 data-slide 控制显隐？
CSS 选择器无法根据 data- 属性值做“等于判断”并联动样式——除非用属性选择器（如 [data-slide="2"]），但它不会随用户操作自动更新。你点按钮时，data-slide 值还是原来的，没变。
- 有人试图写
[data-slide="1"]:target，但这是无效组合：:target只作用于带id的元素，不认data- - 若强行用
[data-slide="1"]设样式，那所有data-slide="1"的元素都会生效，无法区分“当前激活项” - 真正可控的状态载体只能是
id（用于 :target）或checked（用于 radio）
data 属性在这里的实际用途
它不驱动逻辑，但能辅助语义和可维护性：
- 给轮播容器加
data-carousel="true"，方便后续可能的 JS 增强识别 - 给导航链接加
data-slide-to="2"，比硬编码href="#slide-2"更易批量生成 - 给轮播项加
data-slide-index="1"，方便 CSS 里用counter-increment生成序号（非功能必需，纯展示）
真正起作用的永远是 id 和 :target，或者 input:checked 和相邻兄弟选择器。data 属性只是标签上的便签纸，贴得再牢，也不会自己动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
