data-*属性本身不触发行为，需配合css选择器与原生状态（如:checked）实现无脚本交互；它仅作静态标记，非状态引擎，动态控制仍需js。
data-* 属性本身不触发任何行为，必须配合 CSS 选择器 + 伪类或兄弟选择器才能实现无脚本交互；单独写 data-active 不会自动让元素变色或显隐，这是最常被误解的起点。
为什么 [data-active] 选择器本身不能“切换”状态
CSS 选择器只能匹配当前 DOM 状态，它不会监听变化、也不会反向修改属性——[data-active] 只是“如果这个属性存在，就应用样式”，但谁来设这个属性？浏览器不会自动加，JS 不介入就永远没值。
- 常见错误现象：写了
<button data-active></button>和[data-active] { background: blue; }，以为点击就能切换，结果点十次也没反应 - 真正能驱动变化的 HTML 原生状态只有：
:checked（<input type="checkbox">）、:focus、:hover、:target，这些是浏览器内置响应机制 -
data-属性在这里只起“标记作用”：比如用<input id="menu-toggle" type="checkbox">控制菜单显隐，再用[data-menu="open"] .nav { display: block; }配合 JS 切换data-menu值——但此时已非“无脚本”
data- 配合 :checked + ~ 实现真无脚本汉堡菜单
这是目前兼容性最好、零 JS、可访问性达标的方案，核心在于把 data- 当作“静态配置”，把 checkbox 当作“状态开关”，CSS 用兄弟选择器桥接两者。
- HTML 结构必须严格：一个
<input type="checkbox" id="nav-toggle">，后面紧跟着<nav class="sidebar"></nav>，中间不能插其他块级元素 - CSS 写法：
#nav-toggle:checked ~ .sidebar { max-height: 500px; opacity: 1; }，注意不能用display: block——因为display无法过渡，动画会突兀 - 别删掉 checkbox 的默认样式：设
position: absolute; opacity: 0; pointer-events: none;比display: none更安全，否则键盘 Tab 和屏幕阅读器会跳过 - 如果想用
data-nav="mobile"来区分菜单类型，可以加属性选择器增强语义：[data-nav="mobile"] #nav-toggle:checked ~ .sidebar，但切换逻辑仍只依赖:checked，不是data-nav
data- 驱动模块显隐时，为什么不能只靠 CSS 选择器
比如写 <main data-module="logs"></main> 和 [data-module="logs"] .metrics-panel { display: none; }，看似能控制，但问题在于：没有原生事件能自动更新 data-module 值。
- 用户点击“日志”Tab → 你得用 JS 执行
main.dataset.module = "logs"，否则data-module还是旧值，CSS 规则不生效 - 如果强行不用 JS，只能退回到 radio group +
:checked++选择器组合，例如：<input type="radio" name="tab" id="tab-logs"><label for="tab-logs">日志</label><div class="panel">...</div>，然后用#tab-logs:checked + .panel { display: block; } - 这种方案的问题是：无法记忆状态（刷新即丢失）、不支持 URL 锚点跳转、不能响应 localStorage 变化——所有持久化需求都绕不开 JS
- 所以真实项目中，
data-在无脚本场景下，更适合做“一次性配置”，比如<button data-tooltip="保存成功"></button>配合::after { content: attr(tooltip); }，而非动态状态管理
真正无脚本的交互边界很清晰：能用 :checked / :target / :focus-within 驱动的，才叫“纯 CSS”；data- 属性只是辅助标记，不是状态引擎。一旦需要跨组件通信、持久化、条件判断，就得让 JS 接手——这不是妥协，而是分层职责的自然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
