纯css变量无法实现点击即改并保持，必须配合javascript或:focus+tabindex；:active仅瞬时生效且不能修改变量；js通过setproperty()更新变量最直接；纯css方案需用:focus模拟状态但有可访问性限制。
可以，但不能只靠纯 CSS 变量本身实现“点击即改并保持”的效果——必须配合 :focus、tabindex 或 JavaScript 才能真正持久生效。
为什么纯 var() + :active 不行
:active 是瞬时伪类，鼠标按下时触发，松开就消失；CSS 变量只是值的容器，它不自带状态记忆能力。哪怕你在 :active 里用 var(--bg-color)，变量值没变，样式也不会“记住”这次点击。
-
:active生效期间无法修改 CSS 变量（CSS 本身不支持在伪类中set变量） - 没有 JS 或焦点机制介入时，CSS 变量的值始终是初始定义的那个，不会因点击自动更新
- 浏览器不会把
:active当作一个可持久的“选中态”来维护
document.documentElement.style.setProperty() 是最直接的点击响应方式
这是让 CSS 变量“动起来”的标准路径：监听点击 → 调用 JS 修改变量 → 样式自动重绘。它不依赖元素是否可聚焦，也不需要额外 HTML 属性。
- 修改全局变量：用
document.documentElement.style.setProperty('--color', 'red') - 修改局部变量：对某个元素调用
el.style.setProperty('--size', '24px')，仅影响该元素及其子元素 - 注意变量名必须带
--前缀，且值要符合 CSS 语法（比如颜色写'#ff6b6b'，不是'red'除非已定义该命名） - 不要在循环或高频事件（如
scroll）里频繁调用，避免强制同步重排；批量变更建议用requestAnimationFrame包裹
想纯 CSS 实现“点击后保持”，得绕过变量走 :focus + tabindex
如果不想写 JS，可以用 tabindex 让任意元素获得焦点能力，再用 :focus 触发样式变化——这时虽然没改 CSS 变量，但视觉上达到了“点击即改并保持”的效果。
- 给按钮或菜单项加
tabindex="0"（确保可聚焦） - CSS 中写
.menu-item:focus { background-color: var(--selected-bg, #5a9); }，变量只是参与计算，不是被修改的对象 - 用户点击后元素获得焦点，样式保留；再次点击其他同类元素，焦点转移，前一个自动退出
:focus - 缺点：键盘用户按
Tab也会触发，需考虑可访问性；无法跨元素联动（比如点 A 后 B 也要变色）
真正灵活的“点击即改”，本质是状态管理问题。CSS 变量负责承载值，JS 负责响应动作并更新值，而 DOM 状态（如 class、focus、dataset）决定何时更新——三者缺一不可。最容易被忽略的是：变量改了，但没检查对应 CSS 规则里是否真的用了 var(--x)，漏掉这一步，改了也白改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
